如何使用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/