首先，做一个跟随鼠标移动的页面特效。
先上代码，就这样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动事件</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.box{ position:relative;
930px;
height:200px;
margin:0 auto;
margin-top:50px;
background: #9400D3;
}
li{
list-style: none;
float:left;
height:200px;
300px;
margin:0;
margin-left:10px;
}
li div{
height:200px;
300px;
margin:0;
}
#thisM{ position:absolute;
z-index:-1;
height:260px;
150px;
left:85px;
background:#4B0082;
top:-30px;
}
#thisN{ position:absolute;
z-index:-3;
height:260px;
150px;
left:85px;
background:black;
top:-30px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="childBox">
<div></div>
</li>
<li class="childBox">
<div></div>
</li>
<li class="childBox">
<div></div>
</li>
</ul>
<div id="thisM"></div>
<div id="thisN"></div>
</div>
<script type='text/javascript'>
var bgCard=document.getElementById('thisM');
var Nav=document.getElementsByTagName('ul');
var btn=Nav[0].getElementsByTagName('div');
var colorArr=['red','green','pink'];
//赋予颜色
for(var i=0;i<btn.length;i++)
{
btn[i].style.backgroundColor=colorArr[i];
};
//为每个btn绑定鼠标事件
function move(obj){
this.timer=setInterval(function(){
//参考点，从每个元素的中线出发考虑，得出结果之后，再拿中线的位置减去bgCard的一半宽度。
var met=bgCard.offsetLeft+0.5*bgCard.offsetWidth;
var a=0.5*btn[obj].offsetWidth+btn[obj].offsetLeft;
var speed=(a-met)/10;
met+=speed;
//下面，记住了，speed为正数，即目标位置数值比移动的数值大，移动的数值加上speed（>0），则用Math.ceil():向上取整。
//否则，speed为负数，即目标位置数值比移动的数值小，移动的数值加上speed（<0)，则用Math.floor():向下取整.
//总而言之，就是使speed的绝对值往大的方向变化就是了。
var b=speed>0?Math.ceil(met-0.5*bgCard.offsetWidth):Math.floor(met-0.5*bgCard.offsetWidth);
bgCard.style.left=b+'px';
console.log(bgCard.offsetLeft+0.5*bgCard.offsetWidth);
console.log(0.5*btn[obj].offsetWidth+btn[obj].offsetLeft);
if((bgCard.offsetLeft+0.5*bgCard.offsetWidth) == (0.5*btn[obj].offsetWidth+btn[obj].offsetLeft))
{
clearInterval(this.timer);
};},30);
};
for(var i=0;i<btn.length;i++)
{ btn[i].index=i;
btn[i].onmouseover=function(){
clearInterval(window.timer);
move(this.index);
console.log(bgCard.offsetLeft+0.5*bgCard.offsetWidth);
};
btn[i].onmouseout=function(){
clearInterval(window.timer);
move(0);
};
};
</script>
</body>
</html>
都是我自己摸索出来的，其中有几个重要的点要注意：
(1)关于setInterval与clearInterval
setInterval要放在功能函数中，不能放在事件触发的函数中。
而clearIntrval要放在事件触发的函数里（感觉也可以不用放,因为还会有另一个clearInterval放在setInterval里的if语句中。不过最好还是放吧。），用来
结构是
//功能函数
function Func(){
//全局变量timer，属于window对象
this.timer=setInterval(function(){
...dosomething...
if(目标结果达到){
//清除定时器
clearInterval(window.timer);} },时间)
}
//条件触发函数（例如，click，mouseover等等）
obj.onclick=function(){
clearInterval(window.timer);
Func(); }
(2)关于Math函数
Math.ceil()与Math.floor()
Math.ceil():向上取整。
Math.floor():向下取整。
var speed=(a-met)/10;
met+=speed;
//下面，记住了，speed为正数，即目标位置数值比移动的数值大，移动的数值加上speed（>0），则用Math.ceil():向上取整。
//否则，speed为负数，即目标位置数值比移动的数值小，移动的数值加上speed（<0)，则用Math.floor():向下取整.
//总而言之，就是使speed的绝对值往大的方向变化就是了。
var b=speed>0?Math.ceil(met-0.5*bgCard.offsetWidth):Math.floor(met-0.5*bgCard.offsetWidth);