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

快乐打工仔 分类:实例代码

如果有很多行的话,可能查看起来非常的不方便。

如果当鼠标放在某一行上的时候能够实现变色效果,那么就比较容易辨识的。

下面结合一段代码实例介绍一下如何实现此功能,代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" />
<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),这个上面已经介绍了就不多说了,下面的也是如此。

javascript鼠标悬浮行变色代码实例,这样的场景在实际项目中还是用的比较多的,关于javascript鼠标悬浮行变色代码实例就介绍到这了。

javascript鼠标悬浮行变色代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容