基于jQuery的的一個隔行變色，鼠標(biāo)移動變色的小插件

更新時間：2010年07月06日 11:01:59 作者：

基于jQuery的的一個隔行變色，鼠標(biāo)移動變色的小插件，學(xué)習(xí)jquery的朋友可以參考下。

table HTMLElement效果

 
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的數(shù)據(jù)表示Html結(jié)構(gòu):

復(fù)制代碼代碼如下:

 
<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> 

您可能感興趣的文章:

相關(guān)文章

jQuery生成假加載動畫效果
在使用PDFObject.js時，由于后臺需要轉(zhuǎn)換數(shù)據(jù)，在前臺顯示的時候，有很長一段時間顯示空白頁面，所以想到寫一個假的加載動畫，下面看下實現(xiàn)代碼
2016-12-12
基于jQuery實現(xiàn)收縮展開功能
這篇文章主要介紹了基于jQuery實現(xiàn)收縮展開功能的相關(guān)資料,需要的朋友可以參考下
2016-03-03
jquery模擬多級復(fù)選框效果的簡單實例
下面小編就為大家?guī)硪黄猨query模擬多級復(fù)選框效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
jQuery?在圖片和文字中插入內(nèi)容實例
jQuery是一種流行的JavaScript庫，可以輕松地在網(wǎng)頁中插入圖片和文字。通過使用jQuery的插入功能，您可以在網(wǎng)頁上動態(tài)地添加內(nèi)容，從而提高用戶體驗。本文將介紹如何使用jQuery在圖片和文字中插入內(nèi)容，并提供一些實用的代碼示例。
2023-06-06
基于jquery的給文章加入關(guān)鍵字鏈接
最近在做一個網(wǎng)站，遇到需要給網(wǎng)站內(nèi)所有的文章加關(guān)鍵字鏈接的問題，我們在瀏覽一些網(wǎng)站的文章的時候，會發(fā)現(xiàn)文章里面的某些關(guān)鍵字是加了鏈接的，并且高亮顯示。
2010-10-10
jQuery.Callbacks()回調(diào)函數(shù)隊列用法詳解
這篇文章主要介紹了jQuery.Callbacks()回調(diào)函數(shù)隊列用法,結(jié)合實例形式詳細(xì)分析了jQuery.Callbacks()回調(diào)函數(shù)隊列的功能、控制標(biāo)志含義與相關(guān)注意事項,需要的朋友可以參考下
2016-06-06
jQuery效果 slideToggle() 方法(在隱藏和顯示之間切換)
slideToggle() 方法通過使用滑動效果（高度變化）來切換元素的可見狀態(tài)。
2011-06-06
jQuery中[attribute]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute]選擇器用法,以實例形式分析了[attribute]選擇器的功能、定義及匹配給定元素屬性的技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
jquery 刪除cookie失效的解決方法
本文是對jquery 刪除cookie失效的解決方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
jQuery+ajax實現(xiàn)局部刷新的兩種方法
在項目中，經(jīng)常會用到ajax，比如實現(xiàn)局部刷新，比如需要前后端交互等，這里呢分享局部刷新的兩種方法，主要用的是ajax里面的.load()。感興趣的朋友一起看看吧
2017-06-06