DIV CSS 佈局教程網

本文實例講述了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程序設計有所幫助。