js隔行變色、鼠標(biāo)劃過變色代碼

2019-11-21 00:09:51

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>隔行變色且鼠標(biāo)劃過變色的效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .container ul{margin:0;padding:0;} .container li{cursor:pointer;height:30px;width:200px;background-color:#FFC;line-height:30px;text-indent:1em;font-size:12px;} .container .change{cursor:pointer;height:30px;width:200px;background-color:#C1F9CC;line-height:30px;text-indent:1em;font-size:12px;} .container .current{cursor:pointer;height:30px;width:200px;background-color:#F66;line-height:30px;text-indent:1em;font-size:12px;} </style> <script type="text/javascript"> window.onload = function() { changeColor('content'); changeColor('content2');//寫上要控制的UL的ID，想控制幾個就控制幾個 changeColor('content3'); } function changeColor(id) { var arrayli = document.getElementById(id).getElementsByTagName('li'); var bool = true;//奇數(shù)行為true var oldStyle;//保存原有樣式 for(var i = 0;i<arrayli.length;i++){ //各行變色 if(bool === true){ arrayli[i].className = "change"; bool = false; } else { arrayli[i].className = ""; bool = true; } //劃過變色 arrayli[i].onmouseover = function() { oldStyle = this.className; this.className = "current" } arrayli[i].onmouseout = function() { this.className = oldStyle; } } } </script> </head> <body> <span>第一個UL</span> <div   id="iwvjtn8m0"   class="container"> <ul id="content"> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> </ul> </div>  <span>第二個UL</span> <div   id="iwvjtn8m0"   class="container"> <ul id="content2"> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> </ul> </div>  <span>第三個UL</span> <div   id="iwvjtn8m0"   class="container"> <ul id="content3"> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> <li>隔行變色，劃過變色</li> </ul> </div> </body> </html>

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

上一篇：純CSS實現(xiàn)的漂亮的立體圖片邊框效果，陰影代碼

下一篇：Js+CSS實現(xiàn)的間斷和不間斷文本滾動代碼