基于js匀速运动的实例讲解

本文主要为大家带来一篇基于匀速运动的实例讲解(侧边栏,淡入淡出)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

javascript中，如何让一个元素(比如p)运动起来呢？

设置基本的样式，一定要让p有定位( 当然用margin的变化也可以让元素产生运动效果 );

基本的结构:

当我们点击，这个按钮的时候，要让p运动起来，其实就是让p的left值持续变化，那么p就会产生运动效果，我们先让left改变，再让他持续改变

window.onload = function(){
    var oBtn = document.querySelector( "input" ),
      oBox = document.querySelector( '#box' );
    oBtn.onclick = function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }
  }

那么每当我点击按钮的时候，p的left值就会在原来的基础上加上10px。这里也可以用获取非行间样式的方法获取left的值再加上10px，也可以达到效果

function css(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, false)[attr];
  }
}
window.onload = function () {
  var oBtn = document.querySelector("input"),
    oBox = document.querySelector('#box');
  oBtn.onclick = function () {
    oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
  }
}

offsetLeft与获取非行间样式left的值 有什么区别呢？

offsetLeft没有px单位，而left是有px单位的

oBtn.onclick = function () {
    // alert( css( oBox, 'left' ) ); //0px
    alert( oBox.offsetLeft ); //0
  }

现在p是点击一下动一下，我们让他持续动起来，怎么做？ 加上定时器

  oBtn.onclick = function () {
    setInterval( function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }, 1000 / 16 );
  }

当我们点击按钮时候，p就会不停的向左运动，怎么让他停下来呢？停下来，肯定是需要条件的，比如，我们让他跑到500px的时候停下来

var timer = null;
  oBtn.onclick = function () {
    timer = setInterval( function(){
      if ( oBox.offsetLeft == 500 ) {
        clearInterval( timer );
      }else {
        oBox.style.left = oBox.offsetLeft + 10 + 'px';
      }
    }, 1000 / 16 );
  }

这样，我们就可以让p停在500px的位置，这里如果我们把步长10 改成 7或者8，你会发现停不下来了，为什么呢？因为会跳过500px这个判断条件

0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 从497变成504跳过了500px，所以p停不下来，那怎么办呢？修改下判断条件就可以了.

oBtn.onclick = function () {
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

把条件变成>=500 清除定时器， 同时还要加上这句代码oBox.style.left = 500 + 'px'，让他强制被停在500px, 否则p就不会停在500px, 而是504px了，还有一个问题，如果在p运动的过程中，你不停的点击按钮，会发现， p开始加速运动了，而不是每次加10px了，这又是为什么呢？这是因为，每次点击一下按钮，就开了一个定时器，每次点击一个按钮就开了一个定时器，这样就会有多个定时器叠加，那么速度也会产生叠加，所以p开始加速了，那么我们要让他保持10px的速度，意思就是不要让定时器叠加，更通俗点说就是确保一个定时器在开着。应该怎么做呢？

oBtn.onclick = function () {
  clearInterval( timer );
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

只需要在每次点击按钮的时候，清除之前的定时器就可以了，这样就能确保始终一个定时器开着，至此，一个最基本的匀速运动结构就完成了，那么我们可以把他封装成函数

    function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }

有了这个函数之后，我们来小小的应用一下。

rebuild库存生产管理系统3.9.5

rebuild是一款高度可配置化的企业管理系统!可免费商用!低代码/零代码快速搭建企业中台、OA办公自动化、CRM客户关系管理、WMS库存管理、TMS运输管理、SCM供应链管理，甚至是 ERP 企业资源计划!REBUILD 侧重于业务需求实现，而非基础技术框架或项目启动模板，通过 REBUILD 可以真正实现零代码快速搭建，无需编程、无需编译代码，甚至无需了解技术。 使用开始使用 REBUIL

下载

http://www.jiathis.com/getcode

打开这个网站，你注意看他右边有个侧栏式效果（分享到），这种特效在网站上很普遍

  
  
  
  



  
分享到

再来一个淡入淡出的效果:

当鼠标移上去之后，透明度变成1

  
  
  
  


@@##@@

相关推荐：

如何用html5 canvas实现匀速运动

用js指定步长实现单方向匀速运动

JS实现匀速运动的代码实例_javascript技巧