這篇文章主要介紹JS運動特效之任意值添加運動的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

日土ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

具體如下：

回顧一下上個例子JS實現多物體運動的方法：

如果此時需求有變化，讓第2個li鼠標移入，高度變化，第三個li鼠標依然邊框，第四個li鼠標移入背景變化。一種辦法就是復制幾分startMove函數，分別把之前width變化改成height，borderWidht，和opacity透明度變化；但是這樣顯然浪費，可以把他們合并成一個函數，把變化的屬性作為參數傳進去就好了.

1. function startMove(obj,attr,iTarget) 函數里新增attr參數
2. 調用參數的方式：由obj.style.屬性名 變成 obj.style[屬性名]
3. 需要分別為每個li添加事件

運行一下發(fā)現，改變寬，高，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); 也可以處理小數，但是經過測試在鼠標移出的時候，與原來狀態(tài)有一點偏差

可以看出，當鼠標移出去的時候，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部分

css部分：

js部分

最后結果演示：

 

以上是“JS運動特效之任意值添加運動的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網站名稱：JS運動特效之任意值添加運動的示例分析-創(chuàng)新互聯
網頁路徑：http://weahome.cn/article/dojsho.html