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