JS 运动基础

1、运动基础

运动中的bug：

a、不会停止的问题：可以通过写一个给定值判断，到达给定位置，清楚定时器。

b、速度取某些值会无法停止：这个是速度给定值后，大于等于给定距离，则清除定时器。

c、到达位置后点击还会运动：函数还要执行一次，改为if...else解决，即把运动和停止隔开。

d、重复点击速度加快：在定时器外清除定时器，初始化，即运动开始时，关闭已有定时器。

比较完整的运动代码如下：

var oDiv1 = document.getElementById('div1');
var timer;
function startMove() {
clearInterval(timer)
timer= setInterval(function(){
var speed = 1;
if(oDiv1.offsetLeft >= 300){
clearInterval(timer)
}else{
oDiv1.style.left = oDiv1.offsetLeft+speed+"px"
}
},30)
}

2、分享到侧边栏效果

速度定义为变量，判断左侧和目标值之间的大小然后对变量赋值，

if(oDiv1.offsetLeft >iTarget){
speed = -10
}else  {
speed = 10
}

3、淡入淡出图片的效果，

opacity的兼容性写法css为：

filter: alpha(opacity:30);
opacity: 0.3;

图片没有offsetOpacity，加上需要处理兼容性，解决办法为声明变量alpha,通过判断alpha和目标值得关系来判断运动的正反方向，最后将alpha的值拼接进去。

var speed= 0;
if (alpha <iTarget){
speed = 0.1
}else  {
speed = -0.1
}
if(alpha == iTarget){
clearInterval(timer)
}else {
alpha +=speed
oDiv1.style.filter = "alpha(opacity:'+alpha+')"
oDiv1.style.opacity = alpha/100;
}

4、缓冲运动

a、距离越大，速度越大，距离越小，速度越小，

var speed = (300-oDiv1.offsetLeft)/10

10为随意数字，数字越大，运动高速度越小，300位目标位置，可以使用变量控制，判断速度的正负可以使用三目运算符：
Math.ceil(数字)向上取整，例如Math.ceil(3.5)得出的结果是4；

Math.floor(数字)向下取整，例如Math.floor(3.5)得出的结果是3；

speed=speed>0?Math.ceil(speed):Math.floor(speed)

b、缓冲菜单