基于勻速運(yùn)動(dòng)的實(shí)例講解(側(cè)邊欄,淡入淡出)

更新時(shí)間：2017年10月17日 09:48:22 作者：ghostwu

下面小編就為大家?guī)?lái)一篇基于勻速運(yùn)動(dòng)的實(shí)例講解(側(cè)邊欄,淡入淡出)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

javascript中，如何讓一個(gè)元素(比如div)運(yùn)動(dòng)起來(lái)呢？

設(shè)置基本的樣式，一定要讓div有定位( 當(dāng)然用margin的變化也可以讓元素產(chǎn)生運(yùn)動(dòng)效果 );

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

基本的結(jié)構(gòu):

   <input type="button" value="動(dòng)起來(lái)"/>
   <div id="box"></div>

當(dāng)我們點(diǎn)擊，這個(gè)按鈕的時(shí)候，要讓div運(yùn)動(dòng)起來(lái)，其實(shí)就是讓div的left值持續(xù)變化，那么div就會(huì)產(chǎn)生運(yùn)動(dòng)效果，我們先讓left改變，再讓他持續(xù)改變

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

那么每當(dāng)我點(diǎn)擊按鈕的時(shí)候，div的left值就會(huì)在原來(lái)的基礎(chǔ)上加上10px。這里也可以用獲取非行間樣式的方法獲取left的值再加上10px，也可以達(dá)到效果

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的值有什么區(qū)別呢？

offsetLeft沒(méi)有px單位，而left是有px單位的

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

現(xiàn)在div是點(diǎn)擊一下動(dòng)一下，我們讓他持續(xù)動(dòng)起來(lái)，怎么做？加上定時(shí)器

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

當(dāng)我們點(diǎn)擊按鈕時(shí)候，div就會(huì)不停的向左運(yùn)動(dòng)，怎么讓他停下來(lái)呢？停下來(lái)，肯定是需要條件的，比如，我們讓他跑到500px的時(shí)候停下來(lái)

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的位置，這里如果我們把步長(zhǎng)10 改成 7或者8，你會(huì)發(fā)現(xiàn)停不下來(lái)了，為什么呢？因?yàn)闀?huì)跳過(guò)500px這個(gè)判斷條件

0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 從497變成504跳過(guò)了500px，所以div停不下來(lái)，那怎么辦呢？修改下判斷條件就可以了.

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 清除定時(shí)器，同時(shí)還要加上這句代碼oBox.style.left = 500 + 'px'，讓他強(qiáng)制被停在500px, 否則div就不會(huì)停在500px, 而是504px了，還有一個(gè)問(wèn)題，如果在div運(yùn)動(dòng)的過(guò)程中，你不停的點(diǎn)擊按鈕，會(huì)發(fā)現(xiàn)， div開(kāi)始加速運(yùn)動(dòng)了，而不是每次加10px了，這又是為什么呢？這是因?yàn)?，每次點(diǎn)擊一下按鈕，就開(kāi)了一個(gè)定時(shí)器，每次點(diǎn)擊一個(gè)按鈕就開(kāi)了一個(gè)定時(shí)器，這樣就會(huì)有多個(gè)定時(shí)器疊加，那么速度也會(huì)產(chǎn)生疊加，所以div開(kāi)始加速了，那么我們要讓他保持10px的速度，意思就是不要讓定時(shí)器疊加，更通俗點(diǎn)說(shuō)就是確保一個(gè)定時(shí)器在開(kāi)著。應(yīng)該怎么做呢？

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 );
}

只需要在每次點(diǎn)擊按鈕的時(shí)候，清除之前的定時(shí)器就可以了，這樣就能確保始終一個(gè)定時(shí)器開(kāi)著，至此，一個(gè)最基本的勻速運(yùn)動(dòng)結(jié)構(gòu)就完成了，那么我們可以把他封裝成函數(shù)

    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);
      }

有了這個(gè)函數(shù)之后，我們來(lái)小小的應(yīng)用一下。

http://www.jiathis.com/getcode

打開(kāi)這個(gè)網(wǎng)站，你注意看他右邊有個(gè)側(cè)欄式效果（分享到），這種特效在網(wǎng)站上很普遍

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>側(cè)邊欄 - 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>

再來(lái)一個(gè)淡入淡出的效果:

當(dāng)鼠標(biāo)移上去之后，透明度變成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>

以上這篇基于勻速運(yùn)動(dòng)的實(shí)例講解(側(cè)邊欄,淡入淡出)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: