隔行变色的js网页特效

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 综合实例 -> 隔行变色的js网页特效

隔行变色的js网页特效

作者:admin 发布时间:2009-6-23 19:41:01 发布人: admin

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a> jz123.cn</title>
<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() {
  var arrayli = document.getElementById('content').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>
应有尽有的网页特效网址：<a href="http://web.archive.org/web/20150530184333/http://myjs.jz123.cn/">http://myjs.jz123.cn</a>
<hr/>
 <div class="container">
  <ul id="content">
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
   <li><a href="http://web.archive.org/web/20150530184333/http://www.jz123.cn/">www.jz123.cn</a></li>
  </ul>
 </div>
</body>
</html>

隔行变色的js网页特效

将本文收藏到QQ书签与更多好友分享

上一篇：文章：带缩略图的图片轮换广告代码下一篇：文章：不间断上下滚动公告代码

网页特效

隔行变色的js网页特效

本类浏览排行 »

本站推荐文章 »