漂亮js滑动菜单

稿源：互联网 2022-07-30 21:47:41 点击： 35420 撤稿纠错

很漂亮的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" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 js左十分好看的滑动菜单效果 站长特效网欢迎您。</title>
<style type="text/css">
body{
 margin:10px;
 padding:10px;
}
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
body,td,div,span,li{
 font-size:12px;
}
.title01,.title02{
 color:#00b;
 font-weight:bold;
}
#DoorP{
 width:200px;
 height:300px;
 padding:0px;
 background:#FFFCF2;
 overflow:hidden;
}
.title01{
 width:100%;
 height:25px;
 background:#FFFCF2;
 cursor:pointer;
}
.title02{
 width:100%;
 height:25px;
 background:#FFFCF2;
 cursor:pointer;
}
.zzjs__net{
 background:#FFFCF2;
 border-bottom:2px solid #fff;
 overflow:hidden;
 color:#666;
 padding-left:4px;
 padding-right:4px;
 line-height:18px;
}
.www_zzjs_net {
  width:202px;
  }
.www_zzjs_net .b1, .www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 {
  font-size:1px;
  display:block;
  background:#FFFCF2;
overflow: hidden;
}
.www_zzjs_net .b1, .www_zzjs_net .b2, .www_zzjs_net .b3 {
  height:1px;
  }
.www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 {
  background:#FFFCF2;
  border-left:1px solid #C7BC98;
  border-right:1px solid #C7BC98;
  }
.www_zzjs_net .b1 {
  margin:0 4px;
  background:#C7BC98;
  }
.www_zzjs_net .b2 {
  margin:0 2px;
  border-width:0 2px;
  }
.www_zzjs_net .b3 {
  margin:0 1px;
  }
.www_zzjs_net .b4 {
  height:2px;
  margin:0;
  }
.www_zzjs_net .c1 {
  margin:0 5px;
  background:#C7BC98;
  }
.www_zzjs_net .c2 {
  margin:0 3px;
  border-width:0 2px;
  }
.www_zzjs_net .c3 {
  margin:0 2px;
  }
.www_zzjs_net .c4 {
  height:2px;
  margin: 0 1px;
  }
.www_zzjs_net .zzjs_net {
  display:block;
  background:transparent;
  border-left:1px solid #C7BC98;
  border-right:1px solid #C7BC98;
  font-size:0.9em;
  text-align:justify;
  }
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div class="www_zzjs_net">
 <b class="b1 c1"></b>
 <b class="b2 c2"></b>
 <b class="b3 c3"></b>
 <b class="b4 c4"></b>
  <div class="zzjs_net">
<div id="DoorP">
 <table>
  <tr>
   <td align="center">
     站长特效网一号菜单
   </td>
  </tr>
 </table>
 <div class="zzjs__net" align="center">
  <a href="#">站长特效一号分类</a><br/>站长特效二号分类<br/>站长特效三号分类<br/>
 </div>
    <b class="b1"></b>
    <b class="b2"></b>
    <b class="b3"></b>
    <b class="b4"></b>
 <table>
  <tr>
   <td align="center">
    站长特效网二号菜单
   </td>
  </tr>
 </table>
<div class="zzjs__net" align="center">
  <a href="#">站长特效四号分类</a><br/>站长特效五号分类<br/>站长特效六号分类<br/>
</div>
    <b class="b1"></b>
    <b class="b2"></b>
    <b class="b3"></b>
    <b class="b4"></b>
 <table>
  <tr>
   <td align="center">
    站长特效网三号菜单
   </td>
  </tr>
 </table>
<div class="zzjs__net" align="center">
  <a href="#">站长特效七号分类</a><br/>站长特效八号分类<br/>站长特效九号分类<br/>
 </div>
</div></div>
 <b class="b4 c4"></b>
 <b class="b3 c3"></b>
 <b class="b2 c2"></b>
 <b class="b1 c1"></b>
<script type="text/javascript">
 var open = 2;
 var openState = new Array();
 var closeState = new Array();
 var dH = 220;
 function $(id){
  if(document.getElementById(id))
  {
   return document.getElementById(id);
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  else
  {
   alert("没有找到!");
  }
 }
 function $tag(id,tagName){
  return $(id).getElementsByTagName(tagName)
 }
 function closeMe(Cid,Oid){
  var h = parseInt(Ds[Cid].style.height);
  //alert(h);
  if(h > 2)
  {
   h = h - Math.ceil(h/3);
   Ds[Cid].style.height = h+"px";
  }
  else
  {
   openMe(Oid);
   clearTimeout(closeState[Cid]);
   return false;
  }
  closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")");
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 function openMe(Oid){
  var h = parseInt(Ds[Oid].style.height);
  //alert(h);
  if(h < dH)
  {
   h = h + Math.ceil((dH-h)/3);
   Ds[Oid].style.height = h+"px";
  }
  else
  {
   clearTimeout(openState[Oid]);
   return false;
  }
  openState[Oid] = setTimeout("openMe("+Oid+")");
 }
 var Ds = $tag("DoorP","div");
 var Ts = $tag("DoorP","table");
 if(Ds.length != Ts.length)
 {
  alert("标题和内容数目不相同!");
 }
 for(var i = 0 ; i < Ds.length ; i++)
 {
  if(i==open)
  {
   Ds[i].style.height = dH+"px";
   Ts[i].className="title01";
  }
  else
  {
   Ds[i].style.height = "0px";
   Ts[i].className="title02";
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  Ts[i].value = i;
  Ts[i].onmouseover = function(){
   if(open==this.value)
   {
    return false;
   }
   Ts[open].className="title02";
   Ts[this.value].className="title01";
   for(var i = 0 ; i < openState.length ; i++)
   {
    clearTimeout(openState[i]);
    clearTimeout(closeState[i]);
   }
   closeMe(open,this.value);
   //openMe(this.value);
   open = this.value;
  }
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 function showDiv(id){
  Ds[id].style.height=dH+"px";
  Ds[open].style.height="0px";
  open = id;
 }
</script>
</body>
</html>

关于漂亮js滑动菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010090964552.shtml方便下次再访问哦。

·上一篇： html页面中简繁体字体转换js脚本
·下一篇： 兼容主流浏览器二级折叠菜单

漂亮js滑动菜单

文章分类LIST >>返回首页

最新游戏

最新新闻