Javascript動畫效果（2）

更新時間：2016年10月11日 15:19:57 作者：foodoir

這篇文章主要為大家詳細介紹了第二篇Javascript動畫效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下

在前面的文章中講了簡單的Javascript動畫效果，這篇文章主要介紹我在改變之前代碼時發(fā)現(xiàn)的一些問題及解決方法。

在前面的多物體寬度變化的例子中，我們給其增加代碼：border: 4px solid #000;我們發(fā)現(xiàn)，鼠標移出后，寬度不是200px了，那么究竟是如何產(chǎn)生這種情況的呢？下面我們通過一個新的例子來分析

html代碼：
<div id="div1">hello</div>
css代碼：
body,div{ margin: 0px; padding: 0px; }
div{ width: 200px; height: 200px; background: red; border: 1px solid #000;}
Javascript代碼：

window.onload = function(){
  startMove();    
}
function startMove(){
  setInterval(function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.width = oDiv.offsetWidth-1+'px';
  },30)
}

/*此時的效果為寬度不斷增加
 * 加上border: 2px solid #000;之后，不斷增大
 * 原因：當前的寬為202，減一后為201，大于200
 * 改變：oDiv.offsetWidth-2
 * 結果：寬永遠為200px
 * 改變：字行內(nèi)樣式中加寬為200px<div id="div1" style="width: 200px;"></div>
 * 結果：改變border的值，可以得到寬度減小的效果
 * 思考：使用getStyle函數(shù)
 */

在這里，我們感覺是offsetWidth上存在問題，我們引入getStyle函數(shù)（其中的判斷分別為兼容ie和firefox），

function getStyle(obj,attr){
  if(obj.currentStyle){//ie
  return obj.currentStyle[attr];
}
  else{//firefox
    return getComputedStyle(obj,false)[attr];
  }
}

然后我們對oDiv.style.width = oDiv.offsetWidth-1+'px';代碼進行修改，代碼如下：

oDiv.style.width = parseInt(getStyle(oDiv,'width'))-1+'px';

在這里，得到的就是不斷減小的效果。我們繼續(xù)對代碼進行修改

css中：
div{ font-size: 12px;color: #fff;}
Javascript中：
oDiv.style.fontSize = parseInt(getStyle(oDiv,'fontSize'))+1+'px';
此時的效果為寬度不斷減小，字體不斷增大。（前面主要是學習getStyle的用法）

在這里，我們再回到多物體動畫上，我們將之前代碼中的的obj.offsetWidth改為parseInt(getStyle(obj,'width'))，在這里我們通過圖片看一下他們間的不同：

我們可以發(fā)現(xiàn)，parseInt(getStyle(obj,'width'))出現(xiàn)了多次，我們可以將將parseInt(getStyle(obj,'width'))賦值給變量icur，這時我們得到的效果就比較好了，此時的代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      body,ul,li{
        margin: 0px;
        padding: 0px;
      }
      ul,li{
        list-style: none;
      }
      ul li{
        width: 200px;
        height: 100px;
        background: yellow;
        margin-bottom: 20px;
        border: 4px solid #000;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        for(var i = 0; i< aLi.length; i++){
          aLi[i].timer = null;
          aLi[i].onmouseover = function(){
            startMove(this,400);
          }
          aLi[i].onmouseout = function(){
            startMove(this,200);
          }
        } 
      }
      function startMove(obj,iTarget){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var icur = parseInt(getStyle(obj,'width'));
          //將parseInt(getStyle(obj,'width'))賦值給變量icur
          var speed = (iTarget - icur)/10;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          if(iTarget == icur){
            clearInterval(obj.timer);
          }
          else{
            //obj.style.width = icur+speed+'px';
            obj.style['width'] = icur+speed+'px';
          }
        },30)
      }
      function getStyle(obj,attr){
        if(obj.currentStyle){
          return obj.currentStyle[attr];
        }
        else
        {
          return getComputedStyle(obj,false)[attr];
        }
      }
    </script>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

到這里，單一動畫效果實現(xiàn)了，如果我們想要第一個li改變寬度，第二個li改變高度，這里我們應該怎樣呢？

思路：在li里面加入id，分情況實現(xiàn)，代碼：<li id="li1"></li> <li id="li2"></li>

實現(xiàn)：

window.onload = function(){
  var Li1 = document.getElementById('li1');
  var Li2 = document.getElementById('li2');
  Li1.onmouseover = function(){
    startMove(this,400);
  }
  Li1.onmouseout = function(){
    startMove(this,100)
  }
  Li2.onmouseover = function(){
    startMove1(this,400);
  }
  Li2.onmouseout = function(){
    startMove1(this,200)
  }
}
       
function startMove(obj,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var icur = parseInt(getStyle(obj,'height'));
    var speed = (iTarget - icur)/10;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(iTarget == icur){
      clearInterval(obj.timer);
    }
    else{
      obj.style['height'] = icur+speed+'px';
    }
  },30)
}
 
function startMove1(obj,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var icur = parseInt(getStyle(obj,'width'));
    var speed = (iTarget - icur)/10;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(iTarget == icur){
      clearInterval(obj.timer);
    }
    else{
      obj.style['width'] = icur+speed+'px';
    }
  },30)
}
 
function getStyle(obj,attr){
  if(obj.currentStyle){//ie
    return obj.currentStyle[attr];
  }
  else
  {
    return getComputedStyle(obj,false)[attr];
  }
}

這里的效果是：鼠標在第一個時，改變高度；在第二個時，改變寬度。并且我們發(fā)現(xiàn)前面的代碼中有很多重復的，我們依然根據(jù)以前的方法，將不同的部分取出來，用參數(shù)的方法傳進去同樣達到我們想要的效果，（這里不同的是width和height，我們用一個參數(shù)attr來傳進去），代碼如下：

window.onload = function(){
  var Li1 = document.getElementById('li1');
  var Li2 = document.getElementById('li2');
  Li1.onmouseover = function(){
    startMove(this,'height',400);
  }
  Li1.onmouseout = function(){
    startMove(this,'height',100)
  }
  Li2.onmouseover = function(){
    startMove(this,'width',400);
  }
  Li2.onmouseout = function(){
    startMove(this,'width',200)
  }
}
       
function startMove(obj,attr,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var icur = parseInt(getStyle(obj,attr));
    var speed = (iTarget - icur)/10;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(iTarget == icur){
      clearInterval(obj.timer);
    }
    else{
      obj.style[attr] = icur+speed+'px';
    }
  },30)
}

在這里，我們試著給透明度也來進行變化，

css中：
ul li{ filter:alpha(opacity:30);opacity:0.3;}

Javascript中：

window.onload = function(){
  var Li1 = document.getElementById('li1');
  var Li2 = document.getElementById('li2');
  Li1.onmouseover = function(){
    startMove(this,'opacity',100);
  }
  Li1.onmouseout = function(){
    startMove(this,'opacity',30)
  }
}

奇怪的是，居然沒有我們想要的結果

原因：假設1：寬度一般為整型，而opacity的值為0-1；假設2：opacity是沒有單位的

修改1：增加一個判斷，當傳入的值為opacity的時候，我們執(zhí)行parseFloat，代碼如下：

var icur = 0;
if(attr == 'opacity'){
  icur = parseFloat(getStyle(obj,attr))*100;
}else{
  icur = parseInt(getStyle(obj,attr));
}

修改2：再增加一個判斷

if(iTarget == icur){
  clearInterval(obj.timer);
}
else{
if(attr = 'opacity'){
  obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
  obj.style.opacity = (icur+speed)/100;
}
else{
obj.style[attr] = icur+speed+'px';
}
}

修改后我們在瀏覽器下，仍能發(fā)現(xiàn)問題，就是opacity的值比1大了一點點

原因分析：計算機的運算并不是那么準確，會出現(xiàn)誤差，

修改：我們在前面增加一個 Math.round，對小數(shù)部分進行四舍五入，代碼如下

var icur = 0;
if(attr == 'opacity'){
  icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
  icur = parseInt(getStyle(obj,attr));
}

這樣，我們的效果就基本完成了，全部代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      body,ul,li{
        margin: 0px;
        padding: 0px;
      }
      ul,li{
        list-style: none;
      }
      ul li{
        width: 200px;
        height: 100px;
        background: yellow;
        margin-bottom: 20px;
        border: 4px solid #000;
        filter:alpha(opacity:30);
        opacity:0.3;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var Li1 = document.getElementById('li1');
        var Li2 = document.getElementById('li2');
        Li1.onmouseover = function(){
          startMove(this,'opacity',100);
        }
        Li1.onmouseout = function(){
          startMove(this,'opacity',30)
        }
      }
     
      function startMove(obj,attr,iTarget){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var icur = 0;
          if(attr == 'opacity'){
            icur = Math.round(parseFloat(getStyle(obj,attr))*100);
          }else{
            icur = parseInt(getStyle(obj,attr));
          }
          var speed = (iTarget - icur)/10;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          if(iTarget == icur){
            clearInterval(obj.timer);
          }
          else{
            if(attr = 'opacity'){
              obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
              obj.style.opacity = (icur+speed)/100;
            }
            else{
              obj.style[attr] = icur+speed+'px';
            }
          }
        },30)
      }   
       
      function getStyle(obj,attr){
        if(obj.currentStyle){
          return obj.currentStyle[attr];
        }
        else
        {
          return getComputedStyle(obj,false)[attr];
        }
      }
    </script>
  </head>
  <body>
    <ul>
      <li id="li1"></li>
    </ul>
  </body>
</html>

這樣，我們就可以對我們的運動進行任意值的變化了。

其實，在不是不覺間，就已經(jīng)將一個簡單的動畫進行了封裝，得到一個簡單的Javascript動畫庫了。后面，我們將繼續(xù)對我們Javascript庫進行補充。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

bootstrap datetimepicker日期插件使用方法
這篇文章主要為大家詳細介紹了bootstrap datetimepicker的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
JS彈出層遮罩,隱藏背景頁面滾動條細節(jié)優(yōu)化分析
下面小編就為大家?guī)硪黄狫S彈出層遮罩,隱藏背景頁面滾動條細節(jié)優(yōu)化分析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考
2016-04-04
老生常談ES6中的類
下面小編就為大家?guī)硪黄仙Ｕ凟S6中的類。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
詳細講解JavaScript中的this綁定
在javascript的函數(shù)中，除了聲明時定義的形參之外，每個函數(shù)還可以接收兩個附加的參數(shù)：this和arguments。這里就講一下this的作用以及不同場景下它的不同指向。
2016-10-10
bootstrap中模態(tài)框、模態(tài)框的屬性實例詳解
這篇文章主要介紹了bootstrap中模態(tài)框、模態(tài)框的屬性實例詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
JavaScript詳解類數(shù)組與可迭代對象的實現(xiàn)原理
這篇文章主要介紹了JavaScript詳解類數(shù)組與可迭代對象的實現(xiàn)原理，ES6中引入了迭代器與可迭代對象的概念，并且提供了對可迭代對象的相關支持，如for...of循環(huán)，Map(iterable)構造器，展開語法...等。讓我們對數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡化
2022-06-06
layui實現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能示例
這篇文章主要介紹了layui實現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能,結合實例形式分析了layui顯示數(shù)據(jù)表格、搜索和修改功能具體界面布局、功能實現(xiàn)相關操作技巧,需要的朋友可以參考下
2020-06-06
TypeScript泛型使用詳細介紹
泛型是靜態(tài)類型語言的基本特征，允許將類型作為參數(shù)傳遞給另一個類型、函數(shù)、或者其他結構。TypeScript 支持泛型作為將類型安全引入組件的一種方式。這些組件接受參數(shù)和返回值，其類型將是不確定的，直到它在代碼中被使用
2022-10-10
JS比較2個日期間隔的示例代碼
這篇文章主要介紹了JS比較2個日期間隔的方法,需要的朋友可以參考下
2014-04-04
JS限制輸入框輸入的實現(xiàn)代碼
這篇文章主要介紹了JS限制輸入框輸入的實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-07-07