基于匀速运动的实例讲解(侧边栏,淡入淡出)

2019-11-19 15:09:34

字体：大中小

来源：转载

供稿：网友

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

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

<style>    div {      width: 100px;      height: 100px;      background: red;      position: absolute;      left: 0px;    }</style>

基本的结构:

   <input type="button" value="动起来"/>   <div id="box"></div>

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

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

那么每当我点击按钮的时候，div的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  }

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

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

当我们点击按钮时候，div就会不停的向左运动，怎么让他停下来呢？停下来，肯定是需要条件的，比如，我们让他跑到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 );  }

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

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

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, 否则div就不会停在500px, 而是504px了，还有一个问题，如果在div运动的过程中，你不停的点击按钮，会发现， div开始加速运动了，而不是每次加10px了，这又是为什么呢？这是因为，每次点击一下按钮，就开了一个定时器，每次点击一个按钮就开了一个定时器，这样就会有多个定时器叠加，那么速度也会产生叠加，所以div开始加速了，那么我们要让他保持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);      }

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

http://www.jiathis.com/getcode

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

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>侧边栏 - by ghostwu</title>  <style>    #box {      width: 150px;      height: 300px;      background: red;      position: absolute;      left: -150px;      top: 50px;    }    #box div {      width: 28px;      height: 100px;      position: absolute;      right: -28px;      top: 100px;      background: green;    }  </style>  <script>    window.onload = function () {      var timer = null;      var oBox = document.getElementById("box");      oBox.onmouseover = function () {        animate(this, 0, 10);      }      oBox.onmouseout = function () {        animate(this, -150, -10);      }      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);      }    }  </script></head><body><div id="box">  <div>分享到</div></div></body></html>

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

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

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>淡入淡出 - by ghostwu</title>  <style>    img {      border: none;      opacity: 0.3;      filter: alpha(opacity:30);    }  </style>  <script>    window.onload = function () {      var timer = null;      var oImg = document.getElementById("img");      oImg.onmouseover = function(){        animate( this, 100, 10 );      }      oImg.onmouseout = function(){        animate( this, 30, -10 );      }      //alpha=30 --> 100      function animate(obj, target, speed) {        clearInterval(timer);        var cur = 0;        timer = setInterval(function () {          cur = css( obj, 'opacity') * 100;          if( cur == target ){            clearInterval( timer );          }else {            cur += speed;            obj.style.opacity = cur / 100;            obj.style.filter = "alpha(opacity:" + cur + ")";          }        }, 30);      }      function css(obj, attr) {        if (obj.currentStyle) {          return obj.currentStyle[attr];        } else {          return getComputedStyle(obj, false)[attr];        }      }    }  </script></head><body><img src="./img/h4.jpg" alt="" id="img"/></body></html>

以上这篇基于匀速运动的实例讲解(侧边栏,淡入淡出)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：vue与TypeScript集成配置最简教程(推荐)

下一篇：javascript 中模板方法单例的实现方法