快捷導(dǎo)航

奇偶行高亮顯示及鼠標(biāo)劃過高亮顯示類

更新時間：2010年07月04日 17:38:34 作者：

奇或偶數(shù)行高亮顯示及鼠標(biāo)莫過高亮顯示,一個經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒有一個封裝成類直接用的.想象自己當(dāng)初谷歌這個類時,還真沒少折騰時間.

花了點(diǎn)時間,封裝成了一個類(附帶一個添加樣式的類),適合初學(xué)者,直接調(diào)用函數(shù)即可,無需改代碼.
核心JavaScript代碼:

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過高亮顯示類~@Mr.Think</title> <style> body{font-size:0.8em;letter-spacing:1px;font-family:"微軟雅黑"; line-height:1.8em} h1{font-size:1em; font-weight:normal;} h1 a{background:#CFF; padding:2px 3px; text-decoration:none;} h1 a:hover{background:#eee; text-decoration:underline} table#itab{border:1px solid #999; width:80%; margin:0 auto; border-collapse:collapse} table#itab td{border:1px solid #ccc; text-align:center;} table#itab caption{font-size:1em; font-weight:normal; color:#a40000; margin-top:20px;} .gray{background:#eee;cursor:pointer} .red{background:#a40000; color:#fff; cursor:pointer} .highol{background:#ccf;cursor:pointer} ol#olid{width:80%; margin:1em auto; padding:0} ol#olid li{list-style:inside decimal;text-indent:5px;line-height:2.2em;} ol#olid em{color:#a40000;} </style> </head> <body>  <h1><a href="http://mrthink.net/">Mr.Think的個人博客</a>@專注前端技術(shù),熱愛PHP,崇尚簡單生活.</h1> <table id="itab"> <caption>我是高亮奇數(shù)行及鼠標(biāo)劃過高亮顯示效果,Uh Oh!</caption> <tr><td>1</td><td>A</td><td>C</td><td>D</td><td>Y</td></tr> <tr><td>2</td><td>B</td><td>S</td><td>A</td><td>E</td></tr> <tr><td>3</td><td>H</td><td>I</td><td>F</td><td>J</td></tr> <tr><td>4</td><td>A</td><td>G</td><td>A</td><td>N</td></tr> <tr><td>5</td><td>Z</td><td>A</td><td>G</td><td>M</td></tr> <tr><td>6</td><td>C</td><td>D</td><td>L</td><td>H</td></tr> <tr><td>7</td><td>D</td><td>W</td><td>G</td><td>S</td></tr> <tr><td>8</td><td>T</td><td>Q</td><td>O</td><td>M</td></tr> </table> <ol id="olid"> <li>可以通過改變<em>var odd=true;</em>的值來確定是高亮顯示奇數(shù)行還是偶數(shù)行;</li> <li>DOM編程,兼容主流瀏覽器,可擴(kuò)展性強(qiáng);</li> <li>適應(yīng)于表格,列表,div等;</li> <li><em>elemid</em>:事件ID,就是你想實(shí)現(xiàn)這種效果所在ID;</li> <li><em>tagName</em>:事件tagName值,比如li,tr,p等等;</li> <li><em>tagNameHighClass</em>:奇或偶數(shù)行高亮顯示的樣式;</li> <li><em>crossTagNameClass<em>:鼠標(biāo)劃過時高亮顯示的樣式.</li> </ol> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

參數(shù)說明:

1.elemid:事件ID,就是你想實(shí)現(xiàn)這種效果所在ID;
2.tagName:事件tagName值,比如li,tr,p等等;
3.tagNameHighClass:奇或偶數(shù)行高亮顯示的樣式;
4.crossTagNameClass:鼠標(biāo)劃過時高亮顯示的樣式.

使用說明:

1.如果你只想要其中一個效果,在類中,刪除對應(yīng)的不需要的代碼,有注釋;
2.調(diào)用(加載函數(shù)建議用本文中的加載函數(shù),用window.onload非明智之舉):

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

 
window.onload=function highYourElem(){ 
highLight("yourId","yourTagName","yourHighClass","yourCrossClass"); 
} 

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

奇偶行高亮顯示及鼠標(biāo)劃過高亮顯示類

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具