這篇文章主要介紹JS運(yùn)動(dòng)特效之任意值添加運(yùn)動(dòng)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

深圳網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,深圳網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為深圳上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的深圳做網(wǎng)站的公司定做！

具體如下：

回顧一下上個(gè)例子JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法：

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

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

運(yùn)行一下發(fā)現(xiàn)，改變寬，高，border都妥妥的，但是最后一個(gè)改變“透明度”沒反應(yīng)，是什么問題那？？

首先opacity的值0.3一個(gè)小數(shù)，parseInt(getStyle(obj,attr)之后便變成0，還有最大的一個(gè)問題就是最后屬性值設(shè)置的時(shí)候：obj.style[attr] =  objAttr+iSpeed+'px'; 顯然opacity并沒有px這個(gè)單位，所以需要對(duì)運(yùn)動(dòng)框架做進(jìn)一步處理

需要判斷一下，當(dāng)接受的參數(shù)是“透明度”的時(shí)候，需要單獨(dú)處理一下，把上面出問題的兩個(gè)地方做一下處理

var objAttr = 0;
if(attr == "opacity"){
   // 由于計(jì)算機(jī)對(duì) 小數(shù)的處理有問題，這里用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); 由于計(jì)算機(jī)不能很精確的處理小數(shù)，會(huì)導(dǎo)致一些問題

用parseInt這種方法：objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以處理小數(shù)，但是經(jīng)過測(cè)試在鼠標(biāo)移出的時(shí)候，與原來狀態(tài)有一點(diǎn)偏差

可以看出，當(dāng)鼠標(biāo)移出去的時(shí)候，opacity應(yīng)該回到1，可結(jié)果卻是0.94 ；所以個(gè)人推薦用Math.round四舍五入函數(shù)來處理這里的小數(shù)問題

做一下判斷，下面也同樣做判斷

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部分

最后結(jié)果演示：

以上是“JS運(yùn)動(dòng)特效之任意值添加運(yùn)動(dòng)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！