本文實例講述了JS實現淡入淡出圖片效果的方法。分享給大家供大家參考,具體如下:
效果:鼠標移入時,圖片由半透明逐漸變成清晰,移出時,由清晰變為半透明
分析:用變量來儲存透明度,因為元素.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目標透明度通過參數傳入 clearInterval(timer); //執行計時器之前,先清除計時器,否則執行完一次再執行,上次的計時器還在,會不停抖動 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); }; };
更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。