如何使用jQuery实现隔行变色效果:
隔行变色效果在网站有大量应用，尤其是在类似新闻列表这样的功能，对于行与行之间的区分有很大的好处，也提高了网站的人性化程度，虽然是个小功能，但是网站的流量都是从这样的小功能点点滴滴积累起来的。此效果可以使用CSS实现，但是由于现有浏览器对于CSS3支持度还不够好，所以使用js或者jQuery是不错的选择，下面就介绍一下如何使用jQuery实现此种效果。代码实例如下:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=" utf-8">
5 <meta name="author" content="http://www.softwhy.com/" />
6 <title>蚂蚁部落</title>
7 <style type="text/css">
8 ul{
9 list-style:none;
10 }
11 </style>
12 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
13 <script type="text/javascript">
14 $(document).ready(function () {
15 jQuery.changeColor = function (ulid) {
16 var liset = $(ulid).find("li");
17 for (var i = 0; i < liset.length; i += 2) {
18 liset.eq(i).css("background-color", "green");
19 }
20 }
21 $.changeColor("#mytest");
22 })
23 </script>
24 <body>
25 <ul id="mytest">
26 <li>第一行</li>
27 <li>第二个行</li>
28 <li>隔行变色的LI</li>
29 <li>隔行变色的LI</li>
30 <li>隔行变色的LI</li>
31 </ul>
32 </body>
33 </html>
以上代码可以将奇数行的背景颜色设置为绿色。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=5790
更多内容可以参阅:http://www.softwhy.com/jqshili/
时间： 2024-11-03 21:21:31