模仿AS效果的导航菜单

菜单|导航

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>模仿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=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=1height=120+20speed=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" >News</div><div id="hor2" >Populor</div><div id="hor3" >Sports</div><div id="hor4" >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.webjx.com" target="_blank">www.webjx.com</a></div></body></html>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2025-01-12 23:29:15

模仿AS效果的导航菜单的相关文章

纯css实现蓝色圆角效果水平导航菜单代码

         本文实例讲述了纯css实现蓝色圆角效果水平导航菜单代码.分享给大家供大家参考.具体如下:          这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单_jquery

本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!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

JavaScript实战之带收放动画效果的导航菜单_javascript技巧

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! 今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-))  ( 由于在写本文时,用的编辑器不同,暂时添加不了演示效果,这里有:最终完整代码和演示 )  动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到'首页导航',显示下面的分组菜单,分组菜单有子菜单,点击可缩放,带动画过度效果!而且,可以随便添加和删除导航菜单和子菜单,

模仿Flash AS效果的导航菜单_javascript技巧

News Populor Sports Woman 1.由AS而想起Javascript 2.用Jscript写ASP有没有先天性的不足? 3.没有了. 1.xhtml+css真的来了吗? 2.Flash取代传统网站 3.Flash何时才能连接数据库? 1.程序员与小姐的10个相同. 2.中国的程序员与中国的足球? 1.二十一世纪最缺的是什么?人才 http://www.jb51.net/article/http://linkweb.cn/js" target="_blank"

原生js做的手风琴效果的导航菜单_javascript技巧

做好的手风琴效果如下,具体看代码:  html代码 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir

javascript采用数组实现tab菜单切换效果_导航菜单

最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已. 以下是tab菜单的html结构: <div id="a"><div id="head"><span id="tab1">vhc</span><span id="tab2">dsdfd</span>..........................<span id=

发一个比较漂亮的选项卡动态增删的效果_导航菜单

1.代码效果示例: Kiss Andy 注:以上代码为DOM动态组织的代码参考 2.点击下表,更换内容 蓝色理想 Google中国 Email-126 艾泽拉斯 3.以下为动态创建:

几个不错的自动收缩菜单导航效果_导航菜单

伸缩效果 内容 内容 内容 内容 伸缩效果 sdf容 sdf容 sf容 sfd容

提取自百度有啊的css圆角效果_导航菜单

圆角一 圆角二 圆角三 更多代码请访问