精美的网页导航菜单,鼠标经过时图片下滑

发布时间：2018-08-21 10:16:28 所属栏目：政策来源：站长网

导读：今天一个做硬件DIY的朋友把他新上线的网站发在群里，小编在他网站访问时发现了这款菜单，利用js+css编写的，非常精美的网页导航条，适合中小型网站使用，当鼠标经过菜单栏目文字时，会有图像向下滚动效果，由于采用了向下流水效果的图片（见下图），所以菜

　　今天一个做硬件DIY的朋友把他新上线的网站发在群里，小编在他网站访问时发现了这款菜单，利用js+css编写的，非常精美的网页导航条，适合中小型网站使用，当鼠标经过菜单栏目文字时，会有图像向下滚动效果，由于采用了“向下流水”效果的图片（见下图），所以菜单看上去非常动感。

精美的网页导航菜单,鼠标经过时图片下滑

　　还是那句话：少说费话，直接看效果！

　　网页版：猛击此处

　　运行版：

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>精美的导航菜单,鼠标经过图片下滑效果 - Liehuo.Net</title> <base href="http://www.veryhuo.com" /> <style type="text/css" /> body {width:980px;margin:0 auto;} ul {list-style: none;margin: 0;padding: 0;} #nav_container4{ width:948px; margin-left:0px; margin-top:3px; float:left; background-image:url(/uploads/allimg/1007/dh_100701.jpg); } #nav_container4 li{ padding:0px; margin-bottom:1px; float:left; border-right:1px solid #ccc; border-left: 1px solid #888; } #nav_container4 a:link,#nav_container4 a:visited,#nav_container4 a:active{ width:128px; background: url(/uploads/allimg/1007/dh_100701.jpg) repeat-x; font-weight:bold; height:25px; padding-top:8px; display:block; text-align:center; border-bottom:1px solid #777; text-decoration:none; color:#ffffff; font-size:14px; } #nav_container4 a:hover{ color:#000; background: url(/uploads/allimg/1007/bg5_liehuo.gif) 0px 0px repeat-x; } .preview img { width:124px; height:94px;} </style> <script type='text/javascript'> var roller=function(){ return{ init:function(el,ty,sx,ex,d,st){ e=document.getElementById(el);if(!e){return;}a=e.getElementsByTagName("a"); for(i=0;i<a.length;i++){ if(!a[i].id){a[i].id=el.id+i;} a[i].n=a[i].o=sx;a[i].en=ex; a[i].ty=ty; if(a[i].ty=='v'){a[i].style.backgroundPosition = '0px '+a[i].n+'px';} else if(a[i].ty=='h'){a[i].style.backgroundPosition = a[i].n+'px 0px';} else{return;} a[i].onmouseover=roller.o;a[i].onmouseout=roller.o; a[i].st=Math.abs(Math.abs(ex-sx)/st);a[i].t=d/st; } }, o:function(e){ e=e||window.event;c=e.target!=null?e.target:e.srcElement; if(c.nodeName=='A' && e.type=="mouseover"){c.w=c.en;roller.s(c);} else if(c.nodeName=='A'){c.w=c.o;roller.s(c);} }, s:function(e){ if(e.ti){clearTimeout(e.ti);} if(Math.abs(e.n-e.w)<e.st){e.n=e.w;} else if(e.n<e.w){e.n=e.n+e.st;} else if(e.n>e.w){e.n=e.n-e.st;} if(e.ty=='v'){e.style.backgroundPosition = '0px '+e.n+'px';} else{e.style.backgroundPosition = e.n+'px 0px';} if(e.n==e.w){clearTimeout(e.ti);return;} e.ti=setTimeout(function(){roller.s(e)}, e.t); } } }(); </script> <base target="_blank" /> </head> <body>  <DIV class=div_body> <DIV class=Head1> <div id="nav_container4" style=" width:960px;"> <ul> <li> <a href="http://www.veryhuo.com/">首页</a> </li> <li> <a href="http://bbs.liehuo.net/" style=" color:#FF0000;">进入论坛</a> </li> <li> <a href="/server/">电脑知识</a> </li> <li> <a href="/news/">IT 资讯</a> </li> <li> <a href="/help/lianxi.html">联系我们</a> </li> <li> <a href="/help/fankui.html">留言反馈</a> </li> <li> <a href="#">VIP 支持</a> </li> </ul> </div> <script> roller.init('nav_container','h',-200,0,100,20); roller.init('nav_container2','v',0,-45,100,20); roller.init('nav_container3','h',-200,-24,100,20); roller.init('nav_container4','v',-66,0,250,20); roller.init('nav_container5','v',0,-45,80,15); </script> </div>  <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!