模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
带缓冲的伸缩下拉菜单_菜单导航特效
查看演示效果
特效Tag:
下拉菜单
层展开
添加
伸缩下拉菜单,带缓冲,点击以后分别载进不同的图片,实际上也可以此为基础制作图片导航,很不错的效果。
<html> <head> <title>带缓冲的伸缩下拉菜单</title> <meta http-equiv="mrc-Type" mrc="text/html;charset=gb2312"> <style> body{ background:white } #menuList{ border-bottom:solid 1px #333333; width:500px; } .boxStyle .caption{ border-top:none; cursor:pointer; background:#33FF99; height:30px; line-height:30px; font-family:"Lucida Sans Unicode"; font-size:12px; padding-left:5px; } .boxStyle{ border:solid 1px #333333; border-bottom:none; background:#0099CC; overflow:hidden; position:relative } img{ border:none } .infor{ background:#000000; position:absolute; bottom:0; left:0; width:100%; filter: Alpha(opacity=50); -moz-opacity:.5; opacity:0.5; display:none; cursor:pointer } .infor:hover{ filter: Alpha(opacity=90); -moz-opacity:.9; opacity:.9; } </style> <script type="text/javascript"> window.onload=function(){ getData(); init(); imgInfor(); } var speed=0; var openOrClose=1; var check=2; var INIT_HEIGHT="30px"; var inforOHeight="20px"; var inforEHeight="320px"; var k_menuBox=new Array(); var k_originalHeight=new Array(); var k_caption=new Array(); var k_infor=new Array(); function $(ele,tags){ if(tags=="id"){ return document.getElementById(ele); } else return getElementsBytagName(ele); } function getData(){ var k=$("menuList","id").getElementsByTagName("div"); for(var i=0;i<k.length;i++){ if(k[i].className=="infor"){ k_infor.push(k[i]); k[i].style.height=inforOHeight; } if(k[i].className=="boxStyle"){ k_menuBox.push(k[i]); k_originalHeight.push(k[i].style.height); initHeight(); var t=k[i].getElementsByTagName("div"); for(var ii=0;ii<t.length;ii++){ if(t[ii].className=="caption"){ k_caption.push(t[ii]); } } } } } function imgInfor(){ for(var i=0;i<k_infor.length;i++){ k_infor[i].style.display="none"; k_infor[i].style.height=inforOHeight; k_infor[i].onclick=function(){ if(check==0){ if(this.style.height==inforOHeight){ openIt(this,inforEHeight); } else{ closeBox(this,inforOHeight); } } } } } function initHeight(){ for(var i=0;i<k_menuBox.length;i++){ k_menuBox[i].style.height=INIT_HEIGHT; } } function findIt(){ for(var i=0;i<k_menuBox.length;i++){ if(k_menuBox[i].style.height!=INIT_HEIGHT){ return k_menuBox[i]; } } return false; } function closeBox(ele,lastHeight){ check=1; openOrClose=0; if(ele!=false){ var h=parseInt(ele.style.height); if(h>parseInt(lastHeight)){ animation(ele,lastHeight,50,8,"close"); setTimeout(function(){closeBox(ele,lastHeight)},1); } else{ ele.style.height=lastHeight; check=0; openOrClose=1; } } } //打开盒子 function openIt(ele,lastHeight){ check=1; openOrClose=0; var h=parseInt(ele.style.height); if(h<parseInt(lastHeight)){ animation(ele,lastHeight,50,8,"open"); setTimeout(function(){openIt(ele,lastHeight)},1); } else{ ele.style.height=lastHeight; check=0; openOrClose=1; } } function animation(ele,lastHeight,ends,speeds,tag){ if(Math.abs(parseInt(ele.style.height)-parseInt(lastHeight))>ends){ if(speed<speeds) speed+=1; } else{ if(speed!=1) speed--; } var g=parseInt(ele.style.height); if(tag=="open") g+=speed; else g-=speed; ele.style.height=g+"px"; } function changeCaptionStyle(ele){ for(var i=0;i<k_caption.length;i++){ k_caption[i].style.backgroundColor="#33FF99"; k_caption[i].style.color="#333333"; if(k_caption[i]==ele){ k_caption[i].style.color="white"; ele.style.backgroundColor="#006666"; } } } function changeCaptionStyle2(ele,bgcolor){ if(ele.parentNode.style.height==INIT_HEIGHT){ ele.style.backgroundColor=bgcolor; } } function init(){ for(var i=0;i<k_caption.length;i++){ k_caption[i].index = i; k_caption[i].onmouseover=function(){ changeCaptionStyle2(this,"#33CC99"); } k_caption[i].onmouseout=function(){ changeCaptionStyle2(this,"#33FF99"); } k_caption[i].onclick=function(){ if(openOrClose==0){ return false; } changeCaptionStyle(this); if(this.parentNode.style.height==INIT_HEIGHT){ imgInfor(); k_infor[this.index].style.display="block"; closeBox(findIt(),INIT_HEIGHT); openIt(this.parentNode,k_originalHeight[this.index]); } else{ imgInfor(); changeCaptionStyle(); closeBox(findIt(),INIT_HEIGHT); } } } } </script> </head> <body> <div id="menuList"> <div style="height:350px;" class="boxStyle"> <div class="caption">英国巨石阵,至今仍是谜</div> <a href="/" target="_blank"> <div class="infor"></div> <img src="http://p1.mb5u.com/texiao/1/wall5.jpg"> </a> </div> <div style="height:350px;" class="boxStyle"> <div class="caption">德国乡村,人与自然和谐</div> <a href="http://www.mb5u.com" target="_blank"> <div class="infor"></div> <img src="http://p1.mb5u.com/texiao/1/wall6.jpg"> </a> </div> <div style="height:350px;" class="boxStyle"> <div class="caption">纳差湖,一片洁净之地</div> <a href="/" target="_blank"> <div class="infor"></div> <img src="http://p1.mb5u.com/texiao/1/wall7.jpg"> </a> </div> </div> </body> </html>
所属频道:
菜单导航特效
/
更新时间:2011-02-24
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
css模拟title和alt的提示效果
目录式导航菜单-鼠标放上的下拉菜单
这么简单就实现了CSS滑动菜单(滑动门)
CSS制作的中英文双语菜单
CSS实现Windows风格的菜单按钮
新浪滑动门(黄色经典)
列表、排行专用的灰、红滑动门菜单
超帅的CSS菜单导航(当前项带下划线)
导航菜单特效 (突出的接钮似效果)
自写的一Javascript右键菜单类
猜你也喜欢看这些
CSS强制等比例缩小图片
CSS 图片放大查看特效
JS图片滤镜自己转换效果,焦点图切换
Javascript图片幻灯代码(无jquery)
国外的Js图片浏览效果
纵向图片滚动JS代码
Js图片匀速向上滚动
Js拖动特效,一串水晶球
Marquee 图片滚动特效
图像过来
相关链接:
复制本页链接
|
搜索带缓冲的伸缩下拉菜单
特效说明:
菜单导航模板
-
带缓冲的伸缩下拉菜单
。