酷似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   class="zzrlfvt"   id="menu">    <div   class="ltlprnl"   id="menu_block">    <ul><li>ASP</li><li>PHP</li><li>.NET</li><li>C#</li><li>JSP</li>    </ul>    </div>    <div   class="lblvxnd"   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 滑動門

學習交流

如何查找有故障的配件

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

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注