隔行变色的js网页特效-JS特效-爱易网页

隔行变色的js网页特效

日期：2014-05-18　浏览次数：20327 次

以下是程序代码

<!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://www.aiyiweb.com">www.aiyiweb.com</a> aiyiweb.com</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://js.aiyiweb.com">http://js.aiyiweb.com</a>
<hr />
 <div class="container">
  <ul id="content">
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
   <li><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></li>
  </ul>
 </div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

隔行变色的js网页特效

相关资料更多>

推荐阅读更多>