js滑鼠懸浮連結背景動畫方式漸變效果

antzone發表於2017-04-07
JS動畫

本章節分享一段程式碼例項，它實現了滑鼠懸浮於連結能夠實現動畫方式背景變色。

這樣的效果比起來生硬的背景變化相當美觀也人性化。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body,ul,h2,p{
  margin:0; padding:0;
  font-family:"微軟雅黑";
  background:#333;
}
li{list-style:none;}
a{text-decoration:none;}
#box{
  width:270px;
  padding:10px 10px 20px;
  overflow:hidden;
  margin:20px auto 0;
  border:1px solid #FFF;
}
.internal{
  width:266px;
  float:left;
}
#box h2{
  height:38px;
  border-bottom:1px solid #ccc;
  padding-left:5px;
}
#box h2 strong{
  float:left; 
  line-height:38px;
  color:#885050;
}
#box h2 a{
  float:right;
  width:52px;
  height:14px;
  font-size:12px;
  text-indent:20px;
  color:#fff;
  line-height:12px;
  font-weight:normal;
  margin-top:10px;
}
#box li{
  height:30px;
  position:relative;
  border-bottom:1px dashed #ccc;
}
#box li div,#box li p{
  height:30px;
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
#box li p{
  background:#fff;
  opacity:0;
  filter:alpha(opacity=0);
}
#box li div a,#box li div span{
  line-height:30px;
  font-size:12px;
  height:30px;
}
#box li div a {
  float:left;
  padding-left:5px;
  color:#7F5454;
  width:185px;
  overflow:hidden;
}
#box li div span{
  padding-right:10px;
  float:right;
  color:#CF9494;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var d=document;
  var oBox=d.getElementById('box');
  var aLi=oBox.getElementsByTagName('li');
  var index=0;
  for(index=0;index<aLi.length;index++){
    var oP=aLi[index].getElementsByTagName('p')[0];
    oP.iAlpha=0;
    oP.times=null;
    aLi[index].onmouseover=function(){
      oP=this.getElementsByTagName('p')[0];
      oP.times && clearInterval(oP.times);
      oP.style.opacity=1;
      oP.style.filter="alpha(opacity=100)";
      oP.iAlpha=100;
    };
    aLi[index].onmouseout=function(){
      startMove(this.getElementsByTagName('p')[0])
    };
  }
};
function startMove(obj){
  obj.times=setInterval(function(){
    doMove(obj);
  },10);
}
function doMove(obj){
  var iSpeed=5;
  if(obj.iAlpha<=iSpeed){
    clearInterval(obj.times);
    obj.iAlpha=0;
    obj.time=null;
  }else{
    obj.iAlpha-=iSpeed;
  }
  obj.style.filter="alpha(opacity="+obj.iAlpha+")";
  obj.style.opacity=obj.iAlpha/100;
}
</script>
</head>
<body>
<div id="box">
  <div class="internal">  
    <h2>
      <strong>螞蟻部落歡迎您</strong>
      <a href="http://www.softwhy.com/">more</a>
    </h2>
    <ul>
      <li>   
        <p></p>
        <div>
          <a href="http://www.softwhy.com/">分享和互助是良好的學習風格</a>    
          <span>2011-09-10</span>   
        </div>
      </li>
      <li>   
        <p></p>
        <div>    
          <a href="http://www.softwhy.com/">每一天都是新的必須要好好珍惜</a>    
          <span>2011-09-10</span>   
        </div>
      </li>
      <li>   
        <p></p>
        <div>    
          <a href="http://www.softwhy.com/">沒有人一開始就是高手，必須要努力學習</a>    
          <span>2011-09-10</span>   
        </div>
      </li>
      <li>   
        <p></p>
        <div>    
          <a href="http://www.softwhy.com/">要想有所成就，就必須有所不同，否則只能是庸庸碌碌</a>    
          <span>2011-09-10</span>   
        </div>
      </li>
      <li>   
        <p></p>
        <div>    
          <a href="http://www.softwhy.com/">div css教程真的很不錯</a>    
          <span>2011-09-10</span>   
        </div>
      </li>
      <li>   
        <p></p>
        <div>    
          <a href="http://www.softwhy.com/"> 網頁電子書下載 </a>    
          <span>2011-09-10</span>   
        </div>
      </li>
      <li>   
        <p></p>
        <div>    
          <a href="http://www.softwhy.com/">網頁特效下載專區</a>    
          <span>2011-09-10</span>   
        </div>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var d=document,將document物件賦值給變數d。

（3）.var oBox=d.getElementById('box')，獲取id屬性值為box的元素。

（4）.var aLi=oBox.getElementsByTagName('li'),獲取oBox元素物件下的所有li元素集合。

（5）.var index=0,宣告一個變數並賦值為0。

（6）.for(index=0;index<aLi.length;index++){}，遍歷每一個li元素。

（7）.var oP=aLi[index].getElementsByTagName('p')[0],獲取當前li元素下的p元素。

（8）.oP.iAlpha=0,為當前p元素物件新增一個屬性，並賦值為0，它是用作和低版本IE瀏覽器下透明度值計算相關。

（9）.oP.times=null,為當前p元素物件新增一個屬性，用作定時器函式的標識。

（10）.aLi[index].onmouseover=function(){

  oP=this.getElementsByTagName('p')[0];

  oP.times && clearInterval(oP.times);

  oP.style.opacity=1;

  oP.style.filter="alpha(opacity=100)";

  oP.iAlpha=100;

};為當前li元素註冊onmouseover事件處理函式。

oP=this.getElementsByTagName('p')[0]，獲取當前li下的p元素，可能有人會疑問為什麼不適用上面已經獲取的p元素物件，這裡要重複獲取一次，這是因為當for迴圈執行完畢後，前面的p元素物件是最後一個li元素中的p元素物件，而不是當前li中的p元素物件了。

oP.times && clearInterval(oP.times)，這個程式碼的作用是當滑鼠懸浮又迅速離開，然後又快速懸浮，第一個漸變效果還沒有完成的時候，那麼就停止這個漸變效果。

oP.style.opacity=1，標準瀏覽器下設定透明度。

oP.style.filter="alpha(opacity=100)"，在低版本瀏覽器下設定透明度。

oP.iAlpha=100，設定為100，和低版本IE瀏覽器數值對應起來。

（11）.aLi[index].onmouseout=function(){

  startMove(this.getElementsByTagName('p')[0])

}，為當前li元素註冊onmouseout事件處理函式，當滑鼠離開的時候執行startMove()方法，引數是當前p元素物件。

（12）.function startMove(obj){

  obj.times=setInterval(function(){

    doMove(obj);

  },10);

},開始定時器函式的執行。

（13）.function doMove(obj){

  var iSpeed=5;

  if(obj.iAlpha<=iSpeed){

    clearInterval(obj.times);

    obj.iAlpha=0;

    obj.time=null;

  }else{

    obj.iAlpha-=iSpeed;

  }

  obj.style.filter="alpha(opacity="+obj.iAlpha+")";

  obj.style.opacity=obj.iAlpha/100;

},設定元素的透明度，非常的簡單的。

二.相關閱讀:

（1）.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。

（2）.onmouseover事件可以參閱javascript mouseover事件一章節。

（3）.clearInterval()方法可以參閱window.clearInterval()一章節。

（4）.onmouseout事件可以參閱javascript mouseout事件一章節。

（5）.setInterval()方法可以參閱setInterval()一章節。

相關文章