1顶

jquery实现折叠菜单缓冲弹出特效

稿源：互联网 2022-04-02 21:40:44 点击： 7161 撤稿纠错

jquery实现折叠菜单淡入淡出缓冲弹出效果，鼠标经过时弹出二级菜单。

以下讨论的是和jquery 折叠缓冲弹出相关的jquery实现折叠菜单缓冲弹出特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(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特效及广告代码。全力打造一流网页特效站！" />
<title>网页特效 jquery实现二级折叠菜单缓冲弹出效果 站长特效网</title>
<SCRIPT src="/img/jquery_zzjs.js" type=text/javascript></SCRIPT>
<SCRIPT>
var menu_wwwzzjsnet=function(){
 var t=15,z=50,s=6,a;
 function dd(n){this.n=n; this.h=[]; this.c=[]}
 dd.prototype.init=function(p,c){
  a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
  for(i;i<l;i++){
   var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
   h.onmouseover=new Function(this.n+'.st('+i+',true)');
   h.onmouseout=new Function(this.n+'.st('+i+')');
  }
 }
 dd.prototype.st=function(x,f){
  var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
  clearInterval(c.t); c.style.overflow='hidden';
  if(f){
   p.className+=' '+a;
   if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
   if(c.mh==c.offsetHeight){c.style.overflow='visible'}
   else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
  }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
 }
 function sl(c,f){
  var h=c.offsetHeight;
  if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
   if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
   clearInterval(c.t); return
  }
  var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
  c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
  c.style.height=h+(d*f)+'px'
 }
 return{dd:dd}
}();//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</SCRIPT>
<style type="text/css">
a{text-decoration:none}
.menu_wwwzzjsnet ul{
  margin:0 0 0 10px;
  padding:0;
  display:none;
}
.menu_wwwzzjsnet ul li{
  height:22px;
  line-height:22px;
  border:none;
}
.menu_wwwzzjsnet ul li a{
  font-size:12px;
  font-weight:normal;
  color:#666;
}
.menu_wwwzzjsnet ul ul{
  position:absolute;
  z-index:3;
  background:#CC3366;
}
.menu_wwwzzjsnet ul ul li{text-indent:10px;padding-right:10px}
.menu_wwwzzjsnet ul ul li a{color:#fff}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新后看效果。
 <ul class="menu_wwwzzjsnet" id="menu_wwwzzjsnet">
    <li><a href="http://www.zzjs.net">站长特效一号菜单</a>
      <ul>
        <li><a href="http://www.zzjs.net">站长特效一号菜单一</a></li>
        <li><a href="http://www.zzjs.net">站长特效一号菜单二</a></li>
        <li><a href="http://www.zzjs.net">站长特效一号菜单三</a></li>
        <li><a href="http://www.zzjs.net">站长特效一号菜单四</a></li>
        <li><a href="http://www.zzjs.net">站长特效一号菜单五</a></li>
        <li><a href="http://www.zzjs.net">站长特效一号菜单六</a></li>
      </ul>
    </li>
    <li><a href="http://www.zzjs.net">站长特效二号菜单</a>
    <ul>
        <li><a href="http://www.zzjs.net">站长特效二号菜单一</a>
          <ul>
            <li><a href="http://www.zzjs.net">站长特效三级菜单一</a></li>
            <li><a href="http://www.zzjs.net">站长特效三级菜单二</a></li>
          </ul>
        </li>
        <li><a href="http://www.zzjs.net">站长特效二号菜单二</a></li>
      </ul>
    </li>
 </ul>
 <SCRIPT type=text/javascript>
 var menu_wwwzzjsnet=new menu_wwwzzjsnet.dd("menu_wwwzzjsnet");
 menu_wwwzzjsnet.init("menu_wwwzzjsnet","menuhover");
</SCRIPT>
</body>
</html>

关于jquery实现折叠菜单缓冲弹出特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011011066755.shtml方便下次再访问哦。

·上一篇： jquery制作淡入淡出tab选项卡特效
·下一篇： js+css制作折叠效果导航菜单

文章分类LIST >>返回首页

排行总榜

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

jquery实现折叠菜单缓冲弹出特效

文章分类LIST >>返回首页

最新游戏

最新新闻