[『网页特效代码*导航菜单类*』]模仿Flash AS效果的导航菜单 摩羯天使 发布于 2007-01-06 14:09 Tags: 时尚 图片 代码 素材 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页特效|Linkweb.cn/Js|---模仿Flash AS效果的导航菜单</title> <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://linkweb.cn/js" target="_blank">http://linkweb.cn/js</a></div> </body> </html> 效果 请打开『网页编辑器-3』 将代码放入“代码”处再点击“预览”看效果
[『网页特效代码*导航菜单类*』]模仿Flash AS效果的导航菜单 摩羯天使 发布于 2007-01-06 14:09
Tags: 时尚 图片 代码 素材 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页特效|Linkweb.cn/Js|---模仿Flash AS效果的导航菜单</title> <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://linkweb.cn/js" target="_blank">http://linkweb.cn/js</a></div> </body> </html> 效果 请打开『网页编辑器-3』 将代码放入“代码”处再点击“预览”看效果
代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页特效|Linkweb.cn/Js|---模仿Flash AS效果的导航菜单</title> <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://linkweb.cn/js" target="_blank">http://linkweb.cn/js</a></div> </body> </html>
效果
请打开『网页编辑器-3』 将代码放入“代码”处再点击“预览”看效果
首页 『图片素材*综合类*』(32) 『图片素材*节日类*』(46) 『图片素材*花草类*』(3) 『图片素材*风景类*』(4) 『图片素材*人物类*』(31) 『图片素材*动物类*』(4) 『图片素材*Gif动画*』(10) 『图片素材*信纸类*』(15) 『图片素材*横幅类*』(2) 『图片素材*年历、月历、日历*』(2) 『图片特效』(5) 『网页背景*综合类*』(10) 『网页背景*节日类*』(3) 『网页背景*溶图*』(6) 『网页背景*花草类*』(1) 『网页背景*闪底*』(0) 『网页背景*动态类*』(1) 『网页色彩』(2) 『网页特效代码*综合类*』(13) 『网页特效代码*鼠标特效类*』(0) 『网页特效代码*导航菜单类*』(9) 『网页特效代码*图片特效类*』(1) 『特效文字』(7) 『网页播放器』(2) 『图标』(10) 『壁纸』(1) 『花边*蕾丝花边*花纹』(2) 『边框*表格』(34) 『分隔线』(31) 『分隔线*节日类*』(3) 『Flash素材』(28) 『Flash素材*节日类*』(5) 『套装素材』(16) 『Photoshop学习』(1) 『网页制作技巧』(5) 『经典素材站』(4) 『网站欣赏』(3) 『原创音画』(3) 『临时储藏室』(3) 『私密空间』(6) 『其它』(5)
素材阁所有素材资源除署名外均由摩羯天使从网络搜集并整理制作与朋友们分享，如有不慎侵犯作者或公司版权的地方敬请发邮件告之，本人将尽快删除。 （E-mail:yaonana67@126.com）
可爱牛图集锦 精美溶图素材(五) 精美溶图素材(四) 精美溶图素材(三) 精美溶图素材(二)
『音乐发烧友』 『摩羯天使』 『DAYDREAM』 『卡卡音乐书房』 『席家花园』 『Yupoo相册』 『网页编辑器-1』 『网页编辑器-2』 『网页编辑器-3』 『网页编辑器-4』 『网页编辑器-5』 『日志背景图产生器』 『在线日历』 『在线制作照片贺卡』 『在线处理照片』 『图片滤镜产生器』 『在线图片工具』 『页面效果生成器』 『在线制作相册MV视频』 『最酷的在线相册』 『配色方案-1』 『配色方案-2』 『配色方案-3』 『配色方案-4』 『配色方案-5』 『在线配色』 『中国传统色彩名录』 『滚动条颜色生成器』 『Logo在线制作』 『Logo，Button在线制作』 『3D banner在线制作』 『Flash上传空间』 『IE在线PhotoShop』 『在线生成行走动画』 『论坛动画头像在线制作』 『印章在线制作』 『Html-Js代码互转便利工具』 『PS透明蕾丝素材』 『各种字体生成器』 『在线汉字简体繁体转换』 『英文闪字生成器-1』 『英文闪字生成器-2』 『字体工具』 『闪字生成器』 『洪恩在线有声词典』 『世界地图』 『真题网』 『原版英语』 『在线词典』 『我爱英语网』 『MP3：闭着眼睛背四级单词』 『爱词霸』 『esnips』 『音乐搜索-搜狗』 『音乐搜索-奇虎』 『音乐搜索-SOSO音乐』 『看道音乐网』 『圣经』 『纳米盘』
用户名
密 码
日志总数:371 今日访问:3453 访问总数:1975945 评论总数:275 留言总数:70
[『网页特效代码*导航菜单类*』]模仿Flash AS效果的导航菜单 
日志列表 
屏幕分辨率设置1024x768像素
