js隔行变色、鼠标划过变色代码

更新时间：2010年10月31日 23:16:27 作者：

隔行变色、鼠标划过变色代码，已经有不少类似的代码了，出于学习的态度，再发一个，因为每个隔行换色的写法不同。

<!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; } } } </script> </head> <body> <span>第一个UL</span> <div class="container"> <ul id="content"> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> </ul> </div>  <span>第二个UL</span> <div class="container"> <ul id="content2"> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> </ul> </div>  <span>第三个UL</span> <div class="container"> <ul id="content3"> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

隔行变色

始终在页面底部的层js实现代码
其实就是通过js将层始终定位在底部，多用于提示效果
2012-11-11
兼容性非常好的js右下角与漂浮广告代码
兼容性非常好的js右下角与漂浮广告代码，需要的朋友可以参考下。
2010-11-11
javascript实现的在当前窗口中漂浮框的代码
javascript实现的在当前窗口中漂浮框的代码，代码中有注释，需要学习的朋友可以参考下。
2010-03-03
js最简单的拖拽效果实现代码
说到拖拽功能，现在各大，中，小型网站都基本上有类似的东西，特别是对弹出层拖拽，更是常见的一塌糊涂。。。
2010-09-09
点弹代码点击页面任何位置都可以弹出页面效果代码
有时候需要点击页面任何位置都可以弹出页面效果，多用于游戏，导航类网站推广
2012-09-09
js漂浮广告实现代码（合集经典）符合W3C
js漂浮广告实现代码，实际上就是一个来回滚动的小图片，碰到边缘就返回，也是一种广告形式，需要的朋友可以收藏下
2012-04-04
带你快速上手前端响应式布局与Bootstrap栅格系统
这篇文章带你快速上手前端响应式布局与Bootstrap栅格系统,响应式布局主要是针对各种不同尺寸的屏幕兼容性问题,需要的朋友可以参考下
2023-03-03
js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数
一个完美的JS拖拽功能，实现层在网页上任意拖动，还可回放拖动规迹，而且在拖动时显示拖动距离参数等相关属性。经本人测试兼容性也是相当不错的代码，学习JavaScript的朋友，可以拿来研究研究，您可不要错过哦
2012-12-12
JS实现用键盘控制DIV上下左右+放大缩小与变色
用键盘控制DIV，红色方块为键盘操作区域，您可以进行如下操作:左右控制;背景变为绿色;背景变为黄色;背景变为蓝色放大或缩小
2012-12-12
xScrollStick 跟随滚动条漂浮的JS特效
这是一个跟随滚动条漂浮的JS特效，就是说滚动条滚动而元素相对屏幕位置不变，需要的朋友可以测试下
2012-04-04