js 隔行变色与鼠标悬停自动变色的实现代码
发布时间：2015-01-08 编辑：jiaochengji.com
如何用js实现隔行变色，以及当鼠标移动到某块区域时自动变色的功能？本文分享一段实现此功能的js代码，希望对大家有所帮助。
一段js效果，实现隔行变色与鼠标移动到某区域时自动变色。
代码 如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隔行变色--www.jbxue.com</title>
<style>
.top{
background-color:#F00;
color:#006;
}
table{
border:1px #C06 dashed;
border-collapse:collapse;
}
th,td{
border:#999 1px solid;
}
.one{
background-color:#ffc;
}
.two{
background-color:#fcc;
}
.over{
background-color:#666;
}
</style>
<script language="javascript" type="application/javascript">
function geHang(){
//获取所有的tr
var trlist=document.getElementsByTagName("tr");
for(var i=1;i<trlist.length;i++){
//进行遍历，并且判断
if(i%2==0){
trlist[i].className="two";
}else{
trlist[i].className="one";
}
var oldcolor;
//实现当鼠标移动到该行，该行背景加深、
trlist[i].onmouseover=function(){
oldcolor=this.className;
//onmouseover会传匿名函数 this--将鼠标移上去会获取当前值
//重新设置新颜色
this.className="over";
}
trlist[i].onmouseout=function(){
//当鼠标离开，自动还原颜色
this.className=oldcolor;
}
}
}
/*
//当鼠标移动上来时候，改变当前颜色
function over(trNode){
//把原来的颜色，另存一下
color=trNode.className;
//将当前行的颜色设over定为
trNode.className="over";
}
//当鼠标移动开时候，把原来的行的颜色设定回来
function out(trNode){
//还原以前的颜色
trNode.className=color;
}*/
</script>
</head>
<body onload="geHang()">
<table>
<tr class="top">
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
<th>电话</th>
<th>邮编</th>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
您可能感兴趣的文章：
js 隔行变色的最简单代码
js 隔行变色 鼠标经过变色的代码
JS控制表格隔行变色的实现代码
js+css 控制表格隔行变色与单行高亮的代码
Js与Css结合实现表格隔行换色(隔行变色)的代码
Js表格隔行换色(隔行变色)代码一例
Js实现表格隔行变色，鼠标经过时高亮显示的代码
javascript实现隔行变色函数代码一例
表格隔行变色的js实现代码
您可能感兴趣的文章：
javascript实现隔行变色函数代码一例
js 隔行变色的最简单代码
JS控制表格隔行变色的实现代码
js 隔行变色与鼠标悬停自动变色的实现代码
js 隔行变色 鼠标经过变色的代码
Js表格隔行换色(隔行变色)代码一例
Js实现表格隔行变色，鼠标经过时高亮显示的代码
使用jquery hover事件实现表格的隔行换色功能示例
Js与Css结合实现表格隔行换色(隔行变色)的代码
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
[关闭]