javascript實現的運動框架詳解

admin發表於2017-02-19
JavaScript框架
所謂的運動框架簡單的說就是讓元素的某一個屬性值能夠有漸進性的變化。運動框架的使用在實際功能中有大量的應用，最常見的比如客服系統，當拖動滾動條的時候，一般客服系統能夠以彈性方式跟隨，下面就簡單介紹一下如何實現此效果:

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#mytest
{
  width:100px;
  height:100px;
  background-color:black;
}
</style>
<script type="text/javascript">
function Move(obj,attr,iTarget)
{
  clearInterval(obj.timer);
  obj.timer=setInterval(function()
  {
    var cur=0;
    if(attr=="opacity")
    {
      if('v' == '\v')
      {
        cur=parseInt(getStyle(obj,attr));
      }
     else
     {
        cur=Math.round(parseFloat(getStyle(obj,attr))*100);
     }
   }
   else
   {
      cur=parseInt(getStyle(obj,attr));
   }
                 
   var speed=(iTarget-cur)/10;
   speed=speed>0?Math.ceil(speed):Math.floor(speed);
             
   if(iTarget==cur)
   {
      clearInterval(obj.timer);
   }
   else
   {
      cur+=speed;
      if(attr=="opacity")
     {
        obj.style.filter="alpha(opacity:"+cur+")"; //for IE
        obj.style.opacity=cur/100;   //for FF
      }
     else
     {
        obj.style[attr]=cur+"px";
      }
    }
  },30);
}
 
function getStyle(obj,name)
{
  if(obj.currentStyle)
  {
    return obj.currentStyle[name];//for IE
  }
  else
  {
    return getComputedStyle(obj,false)[name];//for FF
  }
}
 
window.onload=function()
{
  var mytest=document.getElementById("mytest");
  Move(mytest,"width",200);
}
</script>
</head>
<body>
<div id="mytest">螞蟻部落歡迎您</div>
</body>
</html>

在以上程式碼可以以緩衝的形式將div的寬度設定為200px。當然是用move函式幾乎可以設定一個元素的任何屬性。下面簡單解釋要一下如何實現此效果:

一.實現原理:

原來非常的簡單，通過定時器函式setInterval()不斷的呼叫一個函式以實現不間斷的以不同的速度改變元素的屬性值，最後達預定屬性值。這樣就實現了緩衝效果。

二.程式碼註釋:

1.function Move(obj,attr,iTarget){}，宣告一個函式，此函式實現了運動框架效果，此函式具有三個引數，obj是要操作的物件，attr表示要操作的屬性值例如"width"，iTarget表示要達到的目標屬性值。

2.clearInterval(obj.timer)，作用是關閉上一個上一個定時器，可以防止對對同一個元素同時使用多個定時器。

3.obj.timer=setInterval(function(){}，1000），定時器反覆呼叫函式。

4.var cur=0,用來儲存當前屬性的值。

5.if(attr=="opacity"),判斷要操作的屬性是否是透明度。

6.if('v' == '\v'){}，由於IE8和IE8以下瀏覽器對透明度的處理和其他標準瀏覽器不一樣，所以這裡需要進行判斷。

7. cur=Math.round(parseFloat(getStyle(obj,attr))*100)，針對在FF中opacity屬性值為浮點數值問題，將屬性值 四捨五入、轉換成浮點型。乘以100，使opacity屬性值與IE統一為百分數。

8.var speed=(iTarget-cur)/10,建立遞減的速度speed變數。實現屬性值的變速改變。

9.speed=speed>0?Math.ceil(speed):Math.floor(speed)，取整，解決瀏覽器忽略小於1px的數值 導致運動結束時，離目標值Itarget少幾個畫素的問題。

10.if(iTarget==cur){}如果達到指定屬性值，就停止定時器。

11.cur+=speed，屬性值遞增。

12.if(attr=="opacity"){},透明度關於不同瀏覽器的相容為。

13.function getStyle(obj,name){}，獲取指定兌現的執行屬性的屬性值。

相關文章