模仿Flash并实现动态弹性跳动的菜单

发布时间：2006-09-12 10:39:19　来源：天极网网友评论 0 条

这个效果很好看，您可以拷贝过去修改其中的样式和内容，为你所用。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>模仿AS效果的导航菜单</title><style type="text/css"></style><script type="text/javascript">lastNo=0function re(menu_no){if(lastNo!=menu_no){cur=menu_no+1lastNo=menu_norest()}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.6posY+=speedfor(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()">大焦点阅读</div><div id="hor2" onclick="re(2);huke()">最新更新</div><div id="hor3" onclick="re(3);huke()">网站制作</div><div id="hor4" onclick="re(4);huke()"><a href='http://www.jztop.com/web/jsjl/tg/' target='_blank' class='infotextkey'>网站推广</a></div><div id="board1">1.<a href="http://homepage.yesky.com/326/2567826.shtml">从SEO角度解析百度篡改搜索结果的“借口”</a><br />2.<a href="http://soft.yesky.com/lesson/384/2543384.shtml">WEB标准化：用DIV+CSS进行网页设计</a></div><div id="board2">1.<a href="http://homepage.yesky.com/15/2571515.shtml">用CSS实现表格背景颜色渐变效果</a><br />2.<a href="http://homepage.yesky.com/340/2570840.shtml">网页常见可用性错误——表单组件错误</a><br />3.<a href="http://homepage.yesky.com/353/2570853.shtml">CSS样式表:链接好还是嵌入好?</a></div><div id="board3"><dl>  <dt>·<a href="http://homepage.yesky.com/15/2571515.shtml">用CSS实现表格背景颜色渐变效果</a></dt></dl><dl>  <dt>·<a href="http://homepage.yesky.com/340/2570840.shtml">网页常见可用性错误——表单组件错误</a></dt></dl><dl>  <dt>·<a href="http://homepage.yesky.com/353/2570853.shtml">CSS样式表:链接好还是嵌入好?</a></dt></dl><dl>  <dt>·<a href="http://homepage.yesky.com/314/2570814.shtml">网页常见可用性错误——文案错误</a></dt></dl><dl>  <dt>·<a href="http://homepage.yesky.com/385/2569885.shtml">关于web注册页的可用性分析</a></dt></dl></div><div id="board4"><dl>  <dt>·<a href="http://homepage.yesky.com/15/2571515.shtml">用CSS实现表格背景颜色渐变效果</a></dt></dl><dl>  <dt>·<a href="http://homepage.yesky.com/340/2570840.shtml">网页常见可用性错误——表单组件错误</a></dt></dl><dl>  <dt>·<a href="http://homepage.yesky.com/353/2570853.shtml">CSS样式表:链接好还是嵌入好?</a></dt></dl><dl>  <dt>·<a href="http://homepage.yesky.com/314/2570814.shtml">网页常见可用性错误——文案错误</a></dt></dl><dl>  <dt>·<a href="http://homepage.yesky.com/385/2569885.shtml">关于web注册页的可用性分析</a></dt></dl><dl>  <dt>·<a href="http://homepage.yesky.com/190/2569690.shtml">用ASP和SQL实现基于Web的事件日历</a></dt></dl></div></body></html>

【评论】【收藏本文】【打印】【关闭】

上一篇文章：Javascript网页特效：闪现的礼花背景
下一篇文章：JS实现Flash外链专题大图片的轮显效果

已有 0 位对此新闻感兴趣的网友发表了看法

图文阅读推荐

推荐阅讯: 使用AJAX的十大理由; Javascript实现广告页面的定时关闭; IE和FireFox下javascript读写XML实现广告轮; 网页特效实例：用js获取单选按钮的数据; 控制电脑关机或者重新启动的JS代码; 特效：一个可以用来做招牌字的特效; JavaScript高级程序设计：2.3 关键字; 网页特效：随机显示广告的JS源代码; Javascript函数判断数字的合法性; Javscript实现表单复选框的全选功能

阅读排行: 1.网页特效：一段实用的图片滚动显示代码; 2.网页特效实例：用js获取单选按钮的数据; 3.Javascript特效：随机显示图片的源代码; 4.Javascript技术技巧大全; 5.IE和FireFox下javascript读写XML实现广告轮; 6.用 JavaScript 来操作字符串的函数; 7.添加到收藏夹的Javascript脚本-适合IE和Fir; 8.怎样判断浏览器是否支持javascript?; 9.JavaScript实现网页图片等比例缩放; 10.网页特效：随机显示广告的JS源代码

专题教程: Windows Server-Windows Server文档-Windows Server新闻-Windows Ser PostgreSQL-PostgreSQL文档-PostgreSQL新闻-PostgreSQL专家; WebLogic-WebLogic文档-WebLogic新闻-WebLogic专家 FreeBSD-FreeBSD文档-FreeBSD新闻-FreeBSD专家; Linux-内核 GUI KDE Gnome DNS FTP 安全安装-Linux专区 Windows-AD IIS ServerCore 虚拟化安全 HPC-Windows专区; 大话G游专题：手机病毒揭密; ARP攻击防范与解决方案路由故障处理手册

模仿Flash并实现动态弹性跳动的菜单

相关文章

图文阅读推荐