0顶

隔行变色的js网页特效

稿源：互联网 2022-06-15 10:22:28 点击： 1301 撤稿纠错

隔行变色的js网页特效，可自定义颜色。

以下讨论的是和js相关的隔行变色的js网页特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

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

关于隔行变色的js网页特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2009062356338.shtml方便下次再访问哦。

·上一篇： Js图片滑动切换效果
·下一篇： 超酷的动感导航菜单

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

隔行变色的js网页特效

文章分类LIST >>返回首页

最新游戏

最新新闻