Home  >  Article  >  Web Front-end  >  A small plug-in based on jQuery that changes color on alternate lines and changes color when the mouse moves_jquery

A small plug-in based on jQuery that changes color on alternate lines and changes color when the mouse moves_jquery

WBOY
WBOYOriginal
2016-05-16 18:23:49980browse

table HTMLElement效果
A small plug-in based on jQuery that changes color on alternate lines and changes color when the mouse moves_jquery

复制代码 代码如下:

var br_cc = (function(){
var setEffect = function(els,params){
var settings = {"c1":"#eee","c2":"#ccc","c3":"#f00"};
$.extend(settings,params);
els.each(function(i){
var self = $(this);
if(i%2==0){
this._bg = settings.c1;
}else{
this._bg = settings.c2;
}
self.css({"background-color":this._bg,"cursor":"pointer"});
self.mouseover(function(){
self.css("background-color",settings.c3);
});
self.mouseout(function(){
self.css("background-color",this._bg);
});
});
};
var cc_table = function(params){
params = params || {};
var box = params.box?$("#" params.box):$("body").eq(0);
setEffect(box.find("tr"));
};
var cc_div = function(params){
params = params || {};
var box = params.box?$("#" params.box):$("body").eq(0);
var els = params.tagClass?box.find("." settings.tagClass):box.find("div");
setEffect(els);
};
return {"cc_tb":cc_table,"cc_div":cc_div};
})();
$(document).ready(function(){
br_cc.cc_tb({"box":"stu-datas-tb"});
br_cc.cc_div({"box":"stu-datas-div"});
});

使用非常简单,就不多废话了。有需要的朋友直接拿去。别忘了顶哈。
table和div的数据表示Html结构:
复制代码 代码如下:

table HTMLElement效果






















idnameagesex
1张三18
1张三18
1张三18
1张三18

div HTMLElement效果




1李倩20


1李倩20


1李倩20


1李倩20


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn