分享一下之前做的漸變效果（由于最近正好處于溫故而知新狀態(tài)，所以整理以前的po上來的隨筆會比較多。

通過js實(shí)現(xiàn)的。

傳遞給函數(shù)的內(nèi)容主要有，需要改變的對象、改變的屬性、目標(biāo)值、以及是否有回調(diào)函數(shù)。

可以實(shí)現(xiàn)物體的不同樣式的鏈?zhǔn)阶兓?#xff0c;和不同樣式的同時(shí)變化。

?

廢話不多說，貼上Js代碼（附上注釋）：

<script> //獲取obj樣式為attrs的值 function getStyle(obj,attrs){//IEif(obj.currentStyle){return obj.currentStyle[attrs];}//其他else{return getComputedStyle(obj,false)[attrs];} } //obj:對象，iTarget:變化目標(biāo),attrs:變化的屬性 function startMove(obj,json,fn){var flag = true;//停止計(jì)時(shí)器 clearInterval(obj.timer);//開始計(jì)時(shí)器 obj.timer = setInterval(function(){for(var attrs in json){//獲取到的對應(yīng)的屬性的值var Styles = getStyle(obj,attrs);//如果屬性為透明度，取浮點(diǎn)數(shù)if(attrs == "opacity"){//Math.round四舍五入 cur = Math.round(parseFloat(Styles)*100);}else{cur = parseInt(Styles);}//速度變量,緩沖變化var speed = (json[attrs] - cur)/8;//讓speed為整數(shù) speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);//判斷停止運(yùn)動的位置if(cur != json[attrs]){flag = false;}//如果屬性是透明度if(attrs == "opacity"){obj.style.filter = "alpha(opacity:"+(cur+speed)+")";obj.style.opacity = (cur+speed)/100; }else{obj.style[attrs] = cur+speed+"px";}}if(flag){clearInterval(obj.timer);//判斷是否為鏈?zhǔn)竭\(yùn)動，如果傳了函數(shù)進(jìn)來，則先執(zhí)行函數(shù)if(fn){fn();}}}, 30) } </script>

?

效果圖：

?

以上內(nèi)容，如有錯(cuò)誤請指出，不甚感激。

轉(zhuǎn)載于:https://www.cnblogs.com/adelina-blog/p/5716794.html

總結(jié)

以上是生活随笔為你收集整理的JS_鼠标移入移出渐变效果（类似css3中的transition或animation和@keyframes）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。