酷似FLASH的竖向菜单

2024-09-05 12:19:27

字体：大中小

来源：转载

供稿：网友

酷似FLASH的竖向导航菜单，鼠标放上后，菜单背景会由下而上移动，和FLASH效果简单一模一样，非常不错，用户体验很好，而且代码也很简洁，相信会给你的菜单增色不少。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="www.w3.org/1999/xhtml"><head><title>酷似FLASH的竖向菜单</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><style type="text/css">*{font-size:12px;font-family:"Verdana","Arial";margin:0;padding:0;}#menu{position:relative;border:1px solid #efefef;width:100px;padding: 0;height:110px;}#menu_block{z-index:10;position:absolute;}#menu_block a{display:block;height:22px;line-height:22px;}#color_line{position:absolute;top:0;z-index:0;width:100%;height:22px;background:#fcc;}</style></head><body><div id="menu">    <div id="menu_block">    <ul><li>ASP</li><li>PHP</li><li>.NET</li><li>C#</li><li>JSP</li>    </ul>    </div>    <div id="color_line" style="top:0"></div></div><script type="text/javascript">function $(id){return "string" == typeof id ? (document.getElementById ? document.getElementById(id) : document.all[id]) : id}function moveMenu(){    var aAnchor = $("menu_block").getElementsByTagName("a");    for(var i=0; i colorTop){        var moveDown = function(){            colorTop = Math.ceil(currentTop - (currentTop - colorTop)/1.15);            colorObj.style.top = colorTop + "px";             if(parseInt(colorObj.style.top) >= currentTop){                 window.clearInterval(BoxAction);            }        }         var BoxAction = window.setInterval(moveDown,20);     }else{        var moveUp = function(){            colorTop = Math.floor(currentTop - (currentTop - colorTop)/1.15);            colorObj.style.top = colorTop + "px";             if(parseInt(colorObj.style.top) <= currentTop){                 window.clearInterval(BoxAction);             }        }         var BoxAction = window.setInterval(moveUp,20);     }}moveMenu();</script></body></html>

上一篇：颜色渐变的动感导航菜单

下一篇：CSS 滑动门

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注