上一篇
下一篇
jQuery的隔行变色条纹效果
作者:dangbao 日期:2009-11-25
两种颜色交替的条纹比较常见，用jQuery写比较简单，这也得益于jQuery的两个内置的odd和even的奇偶函数。想想用纯JS要写多少代码，用jQuery才4行而已。三色交替条纹：利用索引将3个类指定3个数字，然后求模运算，得出每行的数值和对应的类。当然，对应的扩展到4、5、6或更多条的背景颜色，就需要给className添加对应的数字和类,并添加模运算的除数即可。
Code
$(document).ready(function() {
$('li:odd').addClass('odd');
$('li:even').addClass('even');
});
$('li:odd').addClass('odd');
$('li:even').addClass('even');
});
Code
$(document).ready(function() {
var className = {
0: 'first',
1: 'second',
2: 'third'
};
$('li').each(function(index) {
$(this).addClass(className[index % 3]);
});
});
var className = {
0: 'first',
1: 'second',
2: 'third'
};
$('li').each(function(index) {
$(this).addClass(className[index % 3]);
});
});
Tags: 
文章来自: 
引用通告: 
网摘收藏: 评论: 1 | 引用: 0 | 查看次数: -
回复
keelii[2009-11-25 04:26 PM | 
]呵呵！JQuery确实很好用，怎么不搞个预览啊，光看代码不好理解。
dangbao 于 2009-11-25 04:44 PM 回复
dangbao 于 2009-11-25 04:44 PM 回复没空弄那么细啊，哈哈
发表评论
