DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS實現淡入淡出圖片效果的方法分析
JS實現淡入淡出圖片效果的方法分析
編輯:關於JavaScript     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved