基于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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 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
德生PL660的电路分析和打磨
2021/03/02 无线电
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python中__init__.py文件的作用详解
2016/09/18 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
详解python中list的使用
2019/03/15 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
Unix如何在一行中运行多个命令
2015/05/29 面试题
英文求职信写作小建议
2014/02/16 职场文书
六查六看自查材料
2014/02/17 职场文书
创业融资计划书
2014/04/25 职场文书
党支部审查意见
2015/06/02 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
Go语言基础函数基本用法及示例详解
2021/11/17 Golang