jQuery实现隔行换色(隔行变色)的代码
发布时间：2015-12-08 编辑：jiaochengji.com
分享一个jquery实现隔行换色(变色)的代码，学习下jquery如何实现隔行变色，有需要的朋友参考下。
例子，jquery实现隔行变色的代码。
复制代码 代码示例:
<!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>jQuery 隔行换色_www.jbxue.com</title>
<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
<style>
/* 隔行换色 */
body{font-size:9pt;}
li{padding:3px;}
.demoOver{background:#ccc;}
.demoBg{background:#f1f1f1;}
</style>
</head>
<body>
<script type="text/javascript">
// 隔行换色
$(function(){
$(".demo ul li").mouseover(function(){
$(this).addClass("demoOver");
}).mouseout(function(){
$(this).removeClass("demoOver");
})
$(".demo ul li:even").addClass("demoBg");
})
</script>
<!-- 隔行换色 -->
注意，第一次运行可能提示有错误，请刷新一下网页再运行一次就正常了。
<div class="demo">
<ul>
<li><a href="/soft/9590.shtml" target="_blank">Java源代码：抽象类和接口</a></li><li><a href="/soft/9569.shtml" target="_blank">VB将多媒体文件写入Access数据库中</a></li><li><a href="/soft/9553.shtml" target="_blank">jQuery 3D 文字三维旋转效果代码</a></li><li><a href="/soft/9546.shtml" target="_blank">Spy++ 原理初探VC++相关源代码</a></li><li><a href="/soft/9548.shtml" target="_blank">画图板源码，VC++增强版</a></li><li><a href="/soft/9554.shtml" target="_blank">jQuery 华丽炫彩、动感多级渐显菜单</a></li><li><a href="/soft/9540.shtml" target="_blank">VC++ 矩阵输入、输出运算及技术文档</a></li><li><a href="/soft/9539.shtml" target="_blank">PHP经典实例第二版 pdf </a></li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQuery 隔行换色_www.jbxue.com</title>
<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
<style>
/* 隔行换色 */
body{font-size:9pt;}
li{padding:3px;}
.demoOver{background:#ccc;}
.demoBg{background:#f1f1f1;}
</style>
</head>
<body>
<script type="text/javascript">
// 隔行换色
$(function(){
$(".demo ul li").mouseover(function(){
$(this).addClass("demoOver");
}).mouseout(function(){
$(this).removeClass("demoOver");
})
$(".demo ul li:even").addClass("demoBg");
})
</script>
<!-- 隔行换色 -->
注意，第一次运行可能提示有错误，请刷新一下网页再运行一次就正常了。
<div class="demo">
<ul>
<li><a href="/soft/9590.shtml" target="_blank">Java源代码：抽象类和接口</a></li><li><a href="/soft/9569.shtml" target="_blank">VB将多媒体文件写入Access数据库中</a></li><li><a href="/soft/9553.shtml" target="_blank">jQuery 3D 文字三维旋转效果代码</a></li><li><a href="/soft/9546.shtml" target="_blank">Spy++ 原理初探VC++相关源代码</a></li><li><a href="/soft/9548.shtml" target="_blank">画图板源码，VC++增强版</a></li><li><a href="/soft/9554.shtml" target="_blank">jQuery 华丽炫彩、动感多级渐显菜单</a></li><li><a href="/soft/9540.shtml" target="_blank">VC++ 矩阵输入、输出运算及技术文档</a></li><li><a href="/soft/9539.shtml" target="_blank">PHP经典实例第二版 pdf </a></li>
</ul>
</div>
</body>
</html>
您可能感兴趣的文章：
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
javascript实现隔行变色函数代码一例
JS控制表格隔行变色的实现代码
js 隔行变色的最简单代码
jQuery 行背景颜色的交替显示(隔行变色)实现代码
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Jquery 隔行变色及鼠标经过变色的代码一例
js 隔行变色与鼠标悬停自动变色的实现代码
JQuery实现表格隔行换色(隔行变色)效果代码一例
js 隔行变色 鼠标经过变色的代码
[关闭]