基于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 相关文章推荐
原生js 秒表实现代码
Jul 24 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
svg动画之动态描边效果
Feb 22 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
Vue渲染过程浅析
Mar 14 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
一个基于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
SONY SRF-40W电路分析
2021/03/02 无线电
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python列表切片常用操作实例解析
2019/12/16 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
描述内存分配方式以及它们的区别
2016/10/15 面试题
幼儿园运动会加油词
2014/02/14 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
给老师的一封感谢信
2015/01/20 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
少先队中队工作总结
2015/08/14 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang