横向滑动特效的菜单

2024-09-05 12:20:14

字体：大中小

来源：转载

供稿：网友

横向滑动特效的菜单，基于CSS+JavaScript技术，感觉挺不错，放上后出现一个指示条会跟着鼠标游动，类似于jQuery打造的效果，但这个却是用JavaScript实现的，和JS框架没有任何关系，而且效果也超不错。

<!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=utf-8" /><title>滑动特效的菜单</title><style>* {margin:0; padding:0}body {font:14px Helvetica, sans-serif; font-weight:bold; background:#FFF}.menu {position:relative; background:url(/jscss/demoimg/200907/bgx.gif) no-repeat; height:35px; width:459px}.menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:9px 5px}.menu li {float:left}.menu a, .menu a:active, .menu a:visited {text-decoration:none; color:#FFF; padding:10px}.menu a:hover {color:#ebf0e6}#slide {position:absolute; bottom:0; height:4px; background:#89957a; z-index:10}</style><script type="text/javascript" language="javascript">var menuSlider=function(){	var m,e,g,s,q,i; e=[]; q=8; i=8;	return{		init:function(j,k){			m=document.getElementById(j); e=m.getElementsByTagName('li');			var i,l,w,p; i=0; l=e.length;			for(i;i<l;i++){				var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}				c.onmouseover=function(){menuSlider.mo(this)}; c.onmouseout=function(){menuSlider.mo(s)};			}			g=document.getElementById(k); g.style.width=w+'px'; g.style.left=p+'px';		},		mo:function(d){			clearInterval(m.tm);			var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);			m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);		},		mv:function(el,ew){			var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);			if(l!=el||w!=ew){				if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}				if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+'px'}			}else{clearInterval(m.tm)}}};}();</script></head><body onload="menuSlider.init('menu','slide')"><div class="menu">    <ul id="menu">        <li>JavaScript</li>        <li>源码爱好者</li>        <li>HTML</li>        <li value="1">网页特效</li>        <li>CSS</li>    </ul>    <div id="slide"></div></div></body></html>

上一篇：虽简单，但实用的CSS二级展开导航栏

下一篇：带标记滑动的JS+CSS菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注