本文實(shí)例講述了JS實(shí)現(xiàn)淡入淡出圖片效果的方法。分享給大家供大家參考,具體如下:
效果:鼠標(biāo)移入時(shí),圖片由半透明逐漸變成清晰,移出時(shí),由清晰變?yōu)榘胪该?/p>
分析:用變量來(lái)儲(chǔ)存透明度,因?yàn)樵?style.alpha不能直接增加或減少
核心代碼:
window.onload=function(){ var oDiv=document.getElementById("div1"); var timer=null; var alpha=30; oDiv.onmouseover=function(){ setAlpha(100); }; oDiv.onmouseout=function(){ setAlpha(30); }; function setAlpha(iTarget){ //iTarget目標(biāo)透明度通過(guò)參數(shù)傳入 clearInterval(timer); //執(zhí)行計(jì)時(shí)器之前,先清除計(jì)時(shí)器,否則執(zhí)行完一次再執(zhí)行,上次的計(jì)時(shí)器還在,會(huì)不停抖動(dòng) timer=setInterval(function(){ var iSpeed; if(alpha<iTarget) { iSpeed=10; } else { iSpeed=-10; } if(alpha==iTarget) { clearInterval(timer); } else { alpha+=iSpeed; oDiv.style.opacity=alpha/100; oDiv.style.filter='alpha(opacity:'+alpha+')' } },30); };};更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注