您的位置：首页 > Web前端 > JavaScript

js实现隔行变色操作鼠标经过效果

2013-11-25 16:05 751 查看
js实现隔行变色操作鼠标经过效果，下面是javascript代码
<script type="text/javascript">

/**隔行变色**/
function changColor()
{

var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
if(i%2==0)
{
tr_Element[i].className = "tr_style_1";
}else
{
tr_Element[i].className = "tr_style_2";
}
}
}

/**鼠标经过的效果**/
function tr_color()
{
var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
tr_Element[i].old_class = tr_Element[i].className;   //先让这个类old_class属性记住它以前的样式
tr_Element[i].onmousemove = function ()
{
this.className = "tr_style";
}
tr_Element[i].onmouseout = function ()
{
this.className = this.old_class;         //当鼠标移开之后还原以前的样式
}

}
}

/**当页面加载时执行**/
window.onload = function (){
changColor();
tr_color();
}

</script>


下面是css代码
<style type="text/css">
/**隔行变色样式**/
.tr_style_1 { background-color:#00FFCC;}
.tr_style_2 { background-color:#FFFF00;}

/**鼠标经过样式**/
.tr_style { background-color:#00FF00; color:#FFFFFF;}
</style>


下面是完整代码：

<!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>js实现隔行变色操作鼠标经过效果</title>

<style type="text/css">
/**隔行变色样式**/
.tr_style_1 { background-color:#00FFCC;}
.tr_style_2 { background-color:#FFFF00;}

/**鼠标经过样式**/
.tr_style { background-color:#00FF00; color:#FFFFFF;}
</style>

<script type="text/javascript">

/**隔行变色**/
function changColor()
{

var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
if(i%2==0)
{
tr_Element[i].className = "tr_style_1";
}else
{
tr_Element[i].className = "tr_style_2";
}
}
}

/**鼠标经过的效果**/
function tr_color()
{
var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
tr_Element[i].old_class = tr_Element[i].className;   //先让这个类old_class属性记住它以前的样式
tr_Element[i].onmousemove = function ()
{
this.className = "tr_style";
}
tr_Element[i].onmouseout = function ()
{
this.className = this.old_class;                //当鼠标移开之后还原以前的样式
}

}
}

/**当页面加载时执行**/
window.onload = function (){
changColor();
tr_color();
}

</script>
</head>

<body>
<table border="1" width="200" height="150" id="table_style" cellpadding="0" cellspacing="0">
<tr>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>美国</td>
<td>美国</td>
<td>美国</td>
</tr>
<tr>
<td>俄罗斯</td>
<td>俄罗斯</td>
<td>俄罗斯</td>
</tr>
<tr>
<td>日本</td>
<td>日本</td>
<td>日本</td>
</tr>
<tr>
<td>新加坡</td>
<td>新加坡</td>
<td>新加坡</td>
</tr>
</table>
</body>
</html>



index.rar (1 KB)

下载次数: 8
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航