基于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实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
假日旅行社实习自我鉴定
2013/09/24 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
单位人事专员介绍信
2014/01/11 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
文科生自我鉴定
2014/02/15 职场文书
消防安全宣传标语
2014/06/07 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
Python的三个重要函数详解
2022/01/18 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS