HTML+JavaScript實現鏈式運動特效

HTML+JavaScript實現鏈式運動特效

在學習js的過程中，發現這傢伙做特效真是不錯，雖然說目前水平還不夠，不過也能寫點簡單的效果。今天分享一個簡單的運動架構，然後利用這個架構實現簡單的鏈式運動特效。

1.move.js

在運動架構中，主要進行長寬變化和透明度的變化。長寬的變化可以實現DIV的體積運動變化效果，透明度的話主要是在滑鼠移入移出事件中添加淡入淡出的效果。我將這個簡單的運動架構封裝到一個單獨的js檔案中，方便調用。

先看看代碼：

//用於擷取非行間樣式function getStyle(obj,name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name];}}//四個參數分別為對象，屬性，修改值，函數function startMove(obj,attr,iTarget,func){clearInterval(obj.timer);obj.timer=setInterval(function(){var cur=0;//判斷要變化的屬性是否為透明度if(attr=='opacity'){cur=parseFloat(getStyle(obj,attr)*100);}else{cur=parseInt(getStyle(obj,attr));}//運動速度計算var speed=(iTarget-cur)/6;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(cur==iTarget){clearInterval(obj.timer);                                                     //若存在函數參數，則執行函數if(func){         func();} }else{ if(attr=='opacity'){//保證IE和FF的相容性                                      obj.style.filter='alpha(opacity:'+(cur+speed)+')';obj.style.opacity=(cur+speed)/100;}else{obj.style[attr]=cur+speed+'px';}}},30);}

2.index.html

<script src="move.js"></script><script>window.onload=function(){var oDiv=document.getElementById('div1');oDiv.onmouseover=function (){startMove(oDiv,'width',300,function(){startMove(oDiv,'height',300,function(){startMove(oDiv,'opacity',100);});});}; oDiv.onmouseout=function (){startMove(oDiv,'opacity',30,function(){startMove(oDiv,'height',100,function(){startMove(oDiv,'width',100);});});};};</script>

在mouseover中：先將DIV進行width變化，等運動結束。然後進行height變化，最後進行opacity變化。

在mouseout中：先進行opacity變化，然後是height變化，最後進行width變化。就是和移入事件運動順序完全相反。（此執行個體並無直接應用意義，但是對運動架構進行一些完善之後就可以做一些常見的特效了）

在startMove()的使用過程中，有類似與遞迴調用的感覺，不過這個好理解多了。

3.小結

雖然說運動架構只有幾十行的代碼，但是其中的細節還是很多的。如果有用到這個架構的同學，在使用的時候先好好整理代碼的邏輯，要不然出了bug，也真夠虐心的。還好，我把注釋寫的很清楚了，希望能協助到有需要的人。

上兩張運動前後的圖：

（忽略浮水印）

具體運動過程還是自己實踐一番為好，再稍作修飾的話，效果肯定倍加。