js 盒子逐渐缓慢移动效果

注释：可以用于盒子弹出，收回效果，比如：某东的产品详情页，侧边有购物车、优惠卷等，鼠标经过弹出效果
     可以看这个网址使用案例：https://www.cnblogs.com/jq-growup/p/15609471.html

 

   function box_mv(element,long,goback){//此时elemt是以个对象， 自定义每个元素的定时器

         clearInterval(element.timer); //先去除原有定时器，只保留当前定时器，

         element.timer =   setInterval( function(){ //elemt.timer  给elemt自定一个属性  旧写法，var定义变量很占用内存，

                                                           //如果调用多次，则要开辟多个内存空间，之分占用内存

         var step = (long - element.offsetLeft) /10; //前进：步长值需要取整数,不然到不了最终目标，那么将小数取临近最大的整数math.ceil

         step = step>0?Math.ceil(step):Math.floor(step) ; //后退取最小的值math.floor

         if(element.offsetLeft == long){

           clearInterval(element.timer);

              if(goback){

                  goback()

              }

                    // callback && callback();

                }

          element.style.left = element.offsetLeft + step + 'px';

                //匀速走 element.offsetLeft + 固定速度 + 'px';

                //逐渐缓慢走  element.offsetLeft + 变速 + 'px'  //变速公式：(目标距离 - 现在的距离)/10

                //                                                  (也就是总长-element.offsetLeft)/10

           

        },15)

       

        }