基于jQuery的的一个隔行变色,鼠标移动变色的小插件


Posted in Javascript onJuly 06, 2010

table HTMLElement效果
基于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结构:
<h2>table HTMLElement效果</h2> 
<table> 
<thead> 
<tr> 
<th>id</th><th>name</th><th>age</th><th>sex</th> 
</tr> 
</thead> 
<tbody id="stu-datas-tb"> 
<tr> 
<td>1</td><td>张三</td><td>18</td><td>男</td> 
</tr> 
<tr> 
<td>1</td><td>张三</td><td>18</td><td>男</td> 
</tr> 
<tr> 
<td>1</td><td>张三</td><td>18</td><td>男</td> 
</tr> 
<tr> 
<td>1</td><td>张三</td><td>18</td><td>男</td> 
</tr> 
</tbody> 
</table> 
<h2>div HTMLElement效果</h2> 
<div id="stu-datas-div"> 
<div class="stu_info"> 
<span>1</span><span>李倩</span><span>20</span><span>女</span> 
</div> 
<div class="stu_info"> 
<span>1</span><span>李倩</span><span>20</span><span>女</span> 
</div> 
<div class="stu_info"> 
<span>1</span><span>李倩</span><span>20</span><span>女</span> 
</div> 
<div class="stu_info"> 
<span>1</span><span>李倩</span><span>20</span><span>女</span> 
</div> 
</div>
Javascript 相关文章推荐
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
一个基于jquery的图片切换效果
Jul 06 #Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 #Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 #Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 #Javascript
JavaScript 内置对象属性及方法集合
Jul 04 #Javascript
js以对象为索引的关联数组
Jul 04 #Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 #Javascript
You might like
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
详解Python做一个名片管理系统
2019/03/14 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
查询优化的一般准则有哪些
2015/03/08 面试题
老公给老婆的道歉信
2014/01/10 职场文书
大学生志愿者感言
2014/01/15 职场文书
卖房协议书
2014/04/11 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年教研员工作总结
2014/12/23 职场文书
python办公自动化之excel的操作
2021/05/23 Python
nginx lua 操作 mysql
2022/05/15 Servers
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python