javascript滑鼠懸浮行變色程式碼例項

admin發表於2017-04-15
JavaScript

如果有很多行的話，可能檢視起來非常的不方便。

如果當滑鼠放在某一行上的時候能夠實現變色效果，那麼就比較容易辨識的。

下面結合一段程式碼例項介紹一下如何實現此功能，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>滑鼠懸浮背景變色效果-螞蟻部落</title> 
<style type="text/css">
ul{
  list-style:none;
  margin:50px;
}
ul li{
  width:250px;
  height:20px;
  line-height:20px;
  font-size:12px;
}
.gehang{
  background-color:#E6E6F2;
}
.bg{
  background-color:#A3D1D1;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var box=document.getElementById("box");
  var lis=box.getElementsByTagName("li");
  for(var index=0;index<lis.length;index++){
    if(index%2==0){
      lis[index].className="gehang";
    }
    lis[index].index=index;
    lis[index].onmouseover=function(){
      this.className="bg";
    }
    lis[index].onmouseout=function(){
      if(this.index%2==0){
        this.className="gehang";
      }
      else{
        this.className="";
      }
    }
  }
}
</script> 
</head> 
<body> 
<div id="box">
  <ul>
    <li>螞蟻部落歡迎您</li>
    <li>只有奮鬥才會有美好的未來</li>
    <li>高手都是從菜鳥成長而來的</li>
    <li>每一天的太陽都是新的，好好珍惜</li>
    <li>衷心的祝願每一位懷有夢想的屌絲成功</li>
    <li>因為螞蟻部落發源於草根</li>
  </ul>
</div>
</body> 
</html>

以上程式碼不僅實現滑鼠懸浮背景變色效果，而且還實現了隔行變色效果，下面介紹一下實現過程:

一.實現原理:

隔行變色是通過求餘判斷li的奇偶行，然後給奇數行設定背景顏色，這樣就是實現了隔行變色效果。當滑鼠放在行的時候，再設定行的背景色，當滑鼠離開的時候，再恢復到原來的狀態。

二.程式碼註釋:

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

2.var box=document.getElementById("box")，獲取id屬性值為bo的元素。

3.var lis=box.getElementsByTagName("li")，獲取box元素下的li元素集合。

4.for(var index=0;index<lis.length;index++){}，for迴圈遍歷li元素集合中每一個li元素。

5.if(i%2==0)，求餘判斷是否是奇數行，因為index是從0開始的。

6.lis[index].className="gehang"，將奇數行li的的樣式class屬性設定為gehang。

7.lis.index=index，為li元素建立一個index屬性，並且賦值為index。

8.lis.onmouseover=function(){}，為每一個li元素註冊onmouseover事件處理函式。

9.this.className="bg"，將當前行的樣式class屬性設定為bg。

10.lis.onmouseout=function(){}，為每一個li元素註冊onmouseout事件處理函式。

11.if(this.index%2==0)，這個上面已經介紹了就不多說了，下面的也是如此。

相關文章