javascript動畫封裝

時間 2019-11-09

原文原文鏈接

1.獲取樣式，須要自定義函數getStyle，style屬性可讀寫，可是隻能讀取行內樣式，所以要取得非行內樣式須要用到IE的currentStyle[attr],以及chrome等其餘瀏覽器的getComputedStyle(obj,flase)[attr]函數以下javascript

function getStyle(obj,attr){
     if(obj.currentStyle){//簡寫 return obj.currentStyle?obj.currentStyle[style]:getComputedStyle(obj,false)[attr];

             return obj.currentStyle[attr];
      }else{
             return getComputedStyle(obj,false)[attr]
               }
}

2.鏈式動畫中的回調函數位置以及一個小細節由於要在第一個函數動畫執行完畢以後執行回調函數，故if（fn）{fn()}應該放在判斷條件以後，也就是在清空計時器以後，放在其他位置會讓其直接先執行。代碼以下html

if(cur==iTarget){
			 clearInterval(obj.timer);	
			 if(fn){
			fn();
		 }
			 }else{
		 obj.style[Attr]=cur+speed+"px";
		}

另外回調函數放置時，第一個函數動畫中this指代選取的元素，而回調函數中的this指代的window對象（親測，用選取元素後定義的變量代替便可,或者在前面你函數定義 var g=this;）java

3.透明度沒有單位‘px’，要另外寫條件，else{ if(){} else() } 且注意兼容性IE中（filter:alpha(opacity:30)）chrome

4.同時改變兩個以上屬性須要用到json，並用for in循環取出每一個值json

5.注意定時器，設置爲當天元素屬性，避免全部元素用同必定時器。obj.timer=setInterval（）瀏覽器

6.注意避免在達到某一個屬性目標值以後定時器即中止，使得其餘屬性值不能達到目標值。立標杆，dom書中也有立標杆的作法，例如先設置odd=flase，實現各行換色。框架源代碼（注意flag位置，放在定時器內並不能達到效果）框架

！（通過屢次測試，利用for in循環加標杆，發現for in循環的兩個屬性的計時器是同時進行的，好比第一width，第二個height，例如我初始位置width:400,height:200，onmouseover=starmove(this,{width:1000},)
onmouseout=starmove(this,{height:400,width:200}),開始可以達到移入寬度變爲1000，移出高度增長，寬度到達200，但第二次移入寬度達到1000之後，移出的時候寬度並不能到達200，只能到達讓計時器進行一次的值，由於此時height已經到達400了，for in遍歷進去的時候檢測標杆是否爲真，只要當第一個屬性的標杆爲真後，計時器就會退出，這裏我認爲立下的標杆僅僅表明了第一個屬性是否達到目標值，因此當把二者位置交換，即onmouseout=starmove(this,{width:200,heoght:400}),問題得以解決，由於寬度（第一個屬性）始終未達到目標值，而高度達到目標值無影響。測試效果正確！<此處存疑，更改位置只是解決當鼠標移入函數只有一個屬性如寬度，鼠標移出函數有兩個屬性值得時候>！！！最後發現，對於先後改變屬性個數不一致的狀況應該把多出的第二個或者更多屬性放在重複出現的屬性後面，不然動畫在執行有限次後不能完美執行，問題代碼以下）如上所說改變屬性height:300，width:200位置後便可解決問題dom

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動畫框架</title>
<style>
*,div{margin:0px;padding:0px;}
div{width:400px;height:200px;margin-bottom:40px;background:#0F0;opacity:0.3;fliter:alpha(opacity:30);border:2px solid blue;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
</body>
<script type="text/javascript">
window.onload=function(){
	var od=document.getElementsByTagName('div');
	for(var i=0;i<od.length;i++){
	     od[i].onmouseover=function(){
			 var g=this;
			 starMove(this,{width:1000}
				)
			 }	
		od[i].onmouseout=function(){			
			 starMove(this,{height:300,width:200,}); 
			 }		
	}
}
 function starMove(obj,json,fn){//fn回調函數
  clearInterval(obj.timer);//執行動畫以前清除動畫
  var flag = true;//是否動畫都完成了
  obj.timer = setInterval(function(){
//var flag=true  flag放在此處可以使用回調函數
   for(var attr in json){
   var icur = 0;
   if(attr == 'opacity'){
   icur = Math.round(parseFloat(getStyle(obj,attr))*100);//轉換成整數,而且四捨五入下
   //計算機在計算小數的時候每每是不許確的！
   }
   else{
   icur = parseInt(getStyle(obj,attr));
   }
   var speed =0;
   speed = (json[attr] - icur)/8;
   speed = speed>0?Math.ceil(speed):Math.floor(speed);
   if(icur != json[attr]){
   flag = false;
   }
   if(attr == 'opacity'){
   obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
   obj.style.opacity = (icur+speed)/100;
   }
   else{
   obj.style[attr] = icur+speed+'px';
   }
   if(flag){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
   }
  }
  },30);
 }
 function getStyle(obj,attr)
 {
  if(obj.currentStyle){
  return obj.currentStyle[attr];
  }
  else{
  return getComputedStyle(obj,false)[attr];
  }
 }
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。