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)
})