本文實例講述了JS運動特效之任意值添加運動的方法。分享給大家供大家參考，具體如下：
回顧一下上個例子JS實現多物體運動的方法：
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 給每個li都添加一個timer liTags[i].onmouseover = function () { startMove(this,400); } liTags[i].onmouseout = function () { startMove(this,200); } } } function getStyle(obj,attr){ return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr]; } function startMove(obj,iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var objWidth = parseInt(getStyle(obj,'width'));//因為是通過[]調用屬性，所以width必須加單引號 // var iSpeed = (iTarget -obj.offsetWidth)/10; // 因為objWidth存放的就是當前對象的寬，所以直接寫objWidth而不是obj.objWidth var iSpeed = (iTarget -objWidth)/10; iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed); if(objWidth == iTarget){ clearInterval(obj.timer); }else{ obj.style.width = objWidth+iSpeed+'px'; } },30); }</script>如果此時需求有變化，讓第2個li鼠標移入，高度變化，第三個li鼠標依然邊框，第四個li鼠標移入背景變化。一種辦法就是復制幾分startMove函數，分別把之前width變化改成height，borderWidht，和opacity透明度變化；但是這樣顯然浪費，可以把他們合并成一個函數，把變化的屬性作為參數傳進去就好了.
1. function startMove(obj,attr,iTarget) 函數里新增attr參數
2. 調用參數的方式：由obj.style.屬性名 變成 obj.style[屬性名]
3. 需要分別為每個li添加事件
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 給每個li都添加一個timer liTags[0].onmouseover = function () { startMove(this,'width',400); } liTags[0].onmouseout = function () { startMove(this,'width',200); } liTags[1].onmouseover = function () { startMove(this,'height',100); } liTags[1].onmouseout = function () { startMove(this,'height',50); } liTags[2].onmouseover = function () { startMove(this,'borderWidth',10); } liTags[2].onmouseout = function () { startMove(this,'borderWidth',2); } liTags[3].onmouseover = function () { startMove(this,'padding',10); } liTags[3].onmouseout = function () { startMove(this,'padding',0); } } } function getStyle(obj,attr){ return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr]; } function startMove(obj,attr,iTarget) {//attr：把變化的屬性最為參數傳入 clearInterval(obj.timer); obj.timer = setInterval(function () { var objAttr = parseInt(getStyle(obj,attr)); var iSpeed = (iTarget -objAttr)/10; iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed); if(objAttr == iTarget){ clearInterval(obj.timer); }else{ //obj.style.width = objWidth+iSpeed+'px'; obj.style[attr] = objAttr+iSpeed+'px';// 需要又.屬性名的形式改成[] } },30); }</script>運行一下發現，改變寬，高，border都妥妥的，但是最后一個改變“透明度”沒反應，是什么問題那？？
首先opacity的值0.3一個小數，parseInt(getStyle(obj,attr)之后便變成0，還有最大的一個問題就是最后屬性值設置的時候：obj.style[attr] = objAttr+iSpeed+'px'; 顯然opacity并沒有px這個單位，所以需要對運動框架做進一步處理
需要判斷一下，當接受的參數是“透明度”的時候，需要單獨處理一下，把上面出問題的兩個地方做一下處理
var objAttr = 0;if(attr == "opacity"){ // 由于計算機對 小數的處理有問題，這里用Math.round處理一下 // objAttr = parseFloat(getStyle(obj,attr)*100); //objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);}else{ objAttr = parseInt(getStyle(obj,attr));}如果不做處理直接 objAttr = parseFloat(getStyle(obj,attr)*100); 由于計算機不能很精確的處理小數，會導致一些問題
用parseInt這種方法：objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以處理小數，但是經過測試在鼠標移出的時候，與原來狀態有一點偏差
可以看出，當鼠標移出去的時候，opacity應該回到1，可結果卻是0.94 ；所以個人推薦用Math.round四舍五入函數來處理這里的小數問題
做一下判斷，下面也同樣做判斷
if(attr == "opacity"){ obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')'; obj.style.opacity = (objAttr+iSpeed)/100;}else{ //obj.style.width = objWidth+iSpeed+'px'; obj.style[attr] = objAttr+iSpeed+'px';// 需要又.屬性名的形式改成[]}完整代碼：
HTML部分
<body><ul> <li></li> <li></li> <li></li> <li></li></ul></body>
css部分：
<style> ul{list-style: none;} ul li{ margin: 10px; width: 200px;height: 50px; border: 2px solid #c00; background: lightblue; }</style>js部分
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 給每個li都添加一個timer liTags[0].onmouseover = function () { startMove(this,'width',400); } liTags[0].onmouseout = function () { startMove(this,'width',200); } liTags[1].onmouseover = function () { startMove(this,'height',100); } liTags[1].onmouseout = function () { startMove(this,'height',50); } liTags[2].onmouseover = function () { startMove(this,'borderWidth',10); } liTags[2].onmouseout = function () { startMove(this,'borderWidth',2); } liTags[3].onmouseover = function () { startMove(this,'opacity',30); } liTags[3].onmouseout = function () { startMove(this,'opacity',100); } } } function getStyle(obj,attr){ return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr]; } function startMove(obj,attr,iTarget) {//attr：把變化的屬性最為參數傳入 clearInterval(obj.timer); obj.timer = setInterval(function () { var objAttr = 0; if(attr == "opacity"){ // 由于計算機對 小數的處理有問題，這里用parseFloat轉一下 objAttr = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ objAttr = parseInt(getStyle(obj,attr)); } var iSpeed = (iTarget -objAttr)/10; iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed); if(objAttr == iTarget){ clearInterval(obj.timer); }else{ if(attr == "opacity"){ obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')'; obj.style.opacity = (objAttr+iSpeed)/100; }else{ //obj.style.width = objWidth+iSpeed+'px'; obj.style[attr] = objAttr+iSpeed+'px'; } } },30); }</script>最后結果演示：
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
