亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS實(shí)現(xiàn)淡入淡出圖片效果的方法分析

 更新時(shí)間：2016年12月20日 14:23:04   作者：鬼畜十三  
這篇文章主要介紹了JS實(shí)現(xiàn)淡入淡出圖片效果的方法,結(jié)合實(shí)例形式分析了js鼠標(biāo)響應(yīng)實(shí)現(xiàn)圖片淡入淡出效果的原理與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(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)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論