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、缓冲菜单