jQuery常用效果

jQuery常用效果

1.表格隔行变色

  $('#data>tbody>tr:odd').css('background','#ccccff')

　　

2.多Tab点击切换

  var $contents = $('#container>div')
        var currIndex = 0;//当前显式的内容div的下表
        $('#tab>li').click(function () {//隐式遍历
            //隐蔽当前已经显示的内容div
            $contents[currIndex].style.display = 'none'
            //显示对应的内容div
            //得到当前点击的li在兄弟中的下标
            var index = $(this).index()
            //找到对应的内容div，并显示
            $contents[index].style.display = 'block'
            //$( $contents[index]).css('display','none')
            currIndex = index

3.回到顶部

        $('#to_top').click(function () {
            //瞬间滚到顶部
            //$('html,body').scrollTop(0)

            //平滑滚到顶部
            //总距离
            var $page = $('html,body')
            var distance = $('html').scrollTop() + $('body').scrollTop()
            //总时间
            var time = 500
            //间隔时间
            var intervalTime = 50
            var itemDistance = distance/(time/intervalTime)
            //使用循环定时器不断滚动
            var intervalId = setInterval(function () {
                distance-=itemDistance
                //到达顶部，停止定时器
                if (distance<=0){
                    distance = 0//修正
                    clearInterval(intervalId)
                }
            },intervalTime)
        })