精细的网页导航菜单,鼠标颠末期图片下滑

发布时间：2018-08-19 13:57:16 所属栏目：创业来源：站长网

导读：本日一个做硬件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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如