JS+CSS隔行变色、鼠标划过变色代码

发布时间：2018-08-17 19:33:26 所属栏目：编程来源：站长网

导读：Java Script+Css隔行变色、鼠标划过变色代码，已经有不少相同的代码了，出于进修的立场，再发一个，由于每个隔行换色的写法差异。殊效演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

　　JavaScript+Css隔行变色、鼠标划过变色代码，已经有不少相同的代码了，出于进修的立场，再发一个，由于每个隔行换色的写法差异。

　　殊效演示：

<!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>隔行变色且鼠标划过变色的结果</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;//奇数举动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; } } }//Downloads By http://www.veryhuo.com/down </script> </head> <body> <span>第一个UL</span> <div class="container"> <ul id="content"> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> </ul> </div> <br> <span>第二个UL</span> <div class="container"> <ul id="content2"> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> </ul> </div> <br> <span>第三个UL</span> <div class="container"> <ul id="content3"> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> </ul> </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys