您好,欢迎访问无忧图库!
注册会员
会员登陆
设为首页
收藏本站
网站首页
矢量素材
PNG图标
JS代码
PSD素材
GIF图库
设计欣赏
广告达人
网页模板
技术文档
无忧论坛
热门:
文字特效
时间日期
颜色背景
导航菜单
表格图层
表单按钮
焦点图
广告代码
网页小图片(6)
PS笔刷(5)
PSD网页模板(0)
CSS+DIV模板(6)
网页背景(1)
网页配色(0)
壁纸(0)
软件下载(0)
flash全站(0)
字体下载(0)
便捷工具(0)
超级无忧(1)
屏幕保护(0)
Flash效果(2)
BOX盒子(0)
Flash广告欣赏(1)
网页音乐播放器(0)
flash导航(0)
flash时钟(0)
当前位置:
首页
>
js代码
>
特效代码
>
导航菜单
带有弹性跳动的菜单
发布时间:2011-01-05
浏览:1次
[收藏该代码]
<style type="text/css"> <!-- a:link,a:visited { text-decoration: none; color: #666666 } a:hover { text-decoration: underline } #hor1 { position:absolute; left:320px; top:20px; width:220px; height:20px; z-index:1; background-color: #999900; } #hor2 { position:absolute; left:320px; top:40px; width:220px; height:20px; z-index:2; background-color: #FFCC00; } #hor3 { position:absolute; left:320px; top:60px; width:220px; height:20px; z-index:3; background-color: #99CC00; } #board1 { position:absolute; left:320px; top:40px; width:220px; height:120px; z-index:-100; background-color: #333333; visibility: hidden; } body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; font-weight: bold; } body { background-color: #666666; } #board2 { position:absolute; left:320px; top:60px; width:220px; height:120px; z-index:-90; background-color: #333333; visibility: hidden; } #board3 { position:absolute; width:220px; height:120px; z-index:-80; left: 320px; top: 80px; background-color: #333333; visibility: hidden; } #hor4 { position:absolute; left:320px; top:80px; width:220px; height:20px; z-index:4; background-color: #99CCCC; } #board4 { position:absolute; left:320px; top:100px; width:220px; height:120px; z-index:-70; background-color: #333333; visibility: hidden; } --> </style> <script type="text/javascript"> lastNo=0 function re(menu_no){ if(lastNo!=menu_no){ cur=menu_no+1 lastNo=menu_no rest() }else{ cur=100 } document.getElementById("board"+menu_no).style.visibility="visible" } function rest(){ for(i=1;i<=4;i++){ document.getElementById("hor"+i).style.top=20*i; document.getElementById("board"+i).style.visibility="hidden" } menu_num=4; act=1 height=120+20 speed=0; posY=0; } function huke(){ if(act==1&&cur<100){ speed=(height-posY)*0.69+speed*0.6 posY+=speed for(i=cur;i<=menu_num;i++){ document.getElementById("hor"+i).style.top=posY+(i-2)*20 } if(Math.abs(height-posY)<0.5){ for(i=cur;i<=menu_num;i++){ document.getElementById("hor"+i).style.top=height+(i-2)*20 } act=0 } setTimeout("huke()",50) } } </script> </head> <body> <div id="hor1" onclick="re(1);huke()">News</div> <div id="hor2" onclick="re(2);huke()">Populor</div> <div id="hor3" onclick="re(3);huke()">Sports</div> <div id="hor4" onclick="re(4);huke()">Woman</div> <div id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足?<br />3.没有了。</div> <div id="board2">1.xhtml+css真的来了吗?<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库?</div> <div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球?</div> <div id="board4">1.二十一世纪最缺的是什么?人才<br /> <a href="http://www.5utu.com" target="_blank">http://www.5utu.com</a> <a href="http://www.5utu.com" target="_blank">http://www.5utu.com</a></div> <p>查找更多代码,请访问:无忧图库</p>
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。
顶一下
(0)
50.00%
踩一下
(0)
50.00%
+ 分享连接
↑上一篇:
采用CSS和JS的下拉菜单
↓下一篇:
2007英文网站最具流行的53种网站导航
用CSS做的垂直导航菜单效果
无图片实现圆角弹出式多级菜单
纯div+css制作的弹出菜单-05
js控制页面字体大小
滑动效果,适合做faq或menu
超酷JS圆形浮动菜单
snazzy border menus 上下TAB菜单
过渡很平滑的Infinite Menus
兼容IE和火狐的纯css下拉菜单
2007英文网站最具流行的53种网站导航
JS城市联动菜单
19个精彩的CSS菜单打包下载
用CSS做的水平导航菜单效果
非常不错的日期选择风格
可关闭的导航隐藏效果
“你好”层打开效果,可关闭
126邮箱TAB效果(同一页面可多次使用)
css写菜单:简洁注释版 [2]
广告代码
共
504
个JS广告代码
››全部
焦点图(256)
相册代码(46)
全屏广告(14)
菜单导航(46)
图片特效(47)
对联广告(7)
在线客服(7)
TAB标签(14)
悬浮漂浮(4)
视频播放(4)
翻牌书角(12)
其他代码(47)
特效代码
共
222
个JS特效代码
››全部
文字特效(13)
时间日期(22)
颜色背景(2)
图片特效(20)
表格图层(37)
导航菜单(64)
表单按钮(50)
CSS 样式(14)
网站常用(0)
推荐广告代码
更多››
图片文字卷帘门效果 带左右前进
自动滚动的jQuery幻灯片代码
HTC宽屏flash焦点图
Jquery幻灯片焦点图插件
带缩略图的6屏幻灯效果
JS+XML图片九宫格预览效果代码
支付宝生活助手首页导航菜单
SOHU背投广告和弹出广告代码
百度百科图片放大缩小代码
可定义时间的全屏收缩广告代码
最新推荐代码
更多››
纯CSS制作支持IE6、IE7、Firefox的下拉菜单
JS动态平滑滚动菜单效果
超酷JS圆形浮动菜单下载
JS打字效果的动态菜单
仿蓝色理想TAB横向下拉菜单效果
滑动效果,适合做faq或menu
JS城市联动菜单
三级下拉菜单 (通用版)
非常不错的日期选择风格
动画效果 打开层/关闭层
关于我们
-
版权声明
-
广告服务
-
无忧论坛
-
工作机会
-
联系我们
-
在线留言
Copyright © 2010-2011
5utu.com
All Rights Reserved.
豫ICP备10020617号