当前位置:  编程技术>jquery

jquery实现隔行变色、鼠标移动变色的小插件

    来源: 互联网  发布时间:2014-09-03

    本文导语:  先来看下table HTMLElement效果,如下图所示: 1、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=...

先来看下table HTMLElement效果,如下图所示:

1、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"});
});

2、table和div的数据表示Html结构:
 

代码示例:
table HTMLElement效果_www.



idnameagesex




1李东东18男


1李东东18男


1李东东18男


1李东东18男



div HTMLElement效果


1赵花花20女


1赵花花20女


1赵花花20女


1赵花花20女


    
 
 

您可能感兴趣的文章:

  • Jquery 隔行变色及鼠标经过变色的代码一例
  • jQuery 表格隔行换色 鼠标高亮行变色的实现代码
  • jquery特效 table鼠标滑过变色的实现代码
  • jquery 实现table隔行变色、复选框的选择变色的代码
  • 用jQuery toggleClass 实现鼠标移上变色
  • jQuery实现table隔行换色和鼠标经过变色的两种方法
  • jquery导航制件jquery鼠标经过变色效果示例
  • Jquery表格隔行变色的代码
  • Jquery选择器实现隔行变色的代码一例
  • jQuery实现隔行换色(隔行变色)的代码
  • JQuery实现表格隔行换色(隔行变色)效果代码一例
  • Jquery实现简单的隔行变色效果
  • JQuery 表格隔行变色与突出显示当前行的代码一例
  • jquery数据删除与隔行变色的实现代码一例
  • jQuery 表格隔行变色的代码(附js版)
  • jquery 隔行变色的二个实例代码
  • jQuery 隔行变色代码(支持键盘上下键及按Enter选定值)
  • jQuery实现表格隔行变色的例子
  • jQuery隔行换色和鼠标经过高亮并显示隐藏内容
  • 使用简洁的jQuery方法实现隔行换色功能
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery插件jquery倒计时插件分享
  • jQuery图片轮换插件 jQuery Dynamic Slideshow
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • jQuery 内容滑动插件 Basic jQuery Slider
  • jQuery圆角插件 jQuery Corners
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery日历插件 jQuery Week Calendar
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery消息提醒插件 jQuery Notty
  • jQuery无限幻灯片插件 jQuery Carousel
  • jQuery多值输入插件 jQuery Manifest
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery相册插件 jQuery.popeye
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery对话框插件 jquery.modalbox
  • jQuery的OpenSocial插件 OpenSocial jQuery
  • jQuery链接插件 jquery.biggerlink
  • 在线客服jQuery 插件 jQuery.onServ
  • jQuery日历插件 jQuery Verbose Calendar
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery UI组件 jQuery UI
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery分页插件 Pagination jQuery Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery的CSV插件 jQuery CSV
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3