基于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 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
处理Python中的URLError异常的方法
2015/04/30 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB