javascript鼠标悬浮行变色代码范例

javascript鼠标悬浮行变色代码实例

javascript鼠标悬浮行变色代码实例:
如果有很多行的话，可能查看起来非常的不方便，如果当鼠标放在某一行上的时候能够实现变色效果，那么就比较容易辨识的，下面结合一段代码实例介绍一下如何实现此功能，代码如下:

<!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 i=0;i<lis.length;i++)
  {
    if(i%2==0)
    {
      lis[i].className="gehang";
    }
    lis[i].index=i;
    lis[i].onmouseover=function()
    {
      this.className="bg";
    }
    lis[i].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 i=0;i<lis.length;i++){}，for循环遍历li元素集合中每一个li元素。
5.if(i%2==0)，求余判断是否是奇数行，因为i是从0开始的。
6.lis.className="gehang"，将奇数行li的的样式class属性设置为gehang。
7.lis.index=i，为li元素创建一个index属性，并且赋值为i。
8.lis.onmouseover=function(){}，为每一个li元素注册onmouseover事件处理函数。
9.this.className="bg"，将当前行的样式class属性设置为bg。
10.lis.onmouseout=function(){}，为每一个li元素注册onmouseout事件处理函数。
11.if(this.index%2==0)，这个上面已经介绍了就不多说了，下面的也是如此。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8332

更多内容可以参阅:http://www.softwhy.com/javascript/

javascript鼠标悬浮行变色代码范例

相关推荐