简单JS滑动的导航效果代码

时间：2022-06-25 21:21:55 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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 type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{margin:0; padding:0;}
body { font:12px "5B8B4F53",san-serif; color:#808080;  padding-top:6px;  }
a { text-decoration:none; color:#808080 }
	a:hover { text-decoration:underline; color:#ba2636 }
ul, li { list-style:none; }
	#nav{ padding:41px 0 0 0;  overflow:hidden;  float:right; margin-right:17px;position:relative ;}
		#nav ul{  width:100%;  background: url(i/naVbotBdr.gif) repeat-x 0 100%; }
		#nav ul li{   float:left; padding-right:28px; display:inline; cursor:pointer; overflow:hidden}
		
		
		#nav a{background:#999;width:100%;  display:block; float:left; outline:none; color:#fff; line- text-align:center; font-size:16px; font-weight:bold; overflow:hidden}
		
		#navCur{ position:absolute; left:0; bottom:0;  color:#F00;  margin:0; padding:0; display: block; float:none; background:#FF0000; cursor:pointer;  overflow:hidden}
</style>
</head>
<body>
    	<div id="nav">
        	<ul class="cf">
            	
            	<li><a href=""  hidefocus="true">1</a></li>
                <li><a href="1" hidefocus="true">2</a></li>
                <li class="cur"><a href="http://www.111com.net"  hidefocus="true">手机主题下载</a></li>
                <li><a href="3" hidefocus="true">4</a></li>
                <li><a href="4" hidefocus="true">5</a></li>
                <li><a href="5" hidefocus="true">6</a></li>
               	
        	</ul>
            <span id="navCur"></span>
        </div>
<script type="text/javascript">
(function(){
	var curPostion,thisLeft, curPostion_1;
	var obj = getId('nav').getElementsByTagName('ul')[0], timer = null ,navCur = getId('navCur'),x,liArr = getId('nav').getElementsByTagName('li'),liLength = liArr.length-1;
	for (var x=0;x<liArr.length; x++ ){
		liArr[liLength].style.paddingRight = "0";
		var li = liArr[x],curPostion = navCur.offsetLeft;
		
		if(li.className == "cur"){ 
			navCur.style.left = li.offsetLeft + "px";
		}
		
		li.onmouseover=function(){
			clearTimeout(timer);
			thisLeft = this.offsetLeft;
			if (thisLeft > navCur.offsetLeft)
			{
				hover();
			}
			else
			{
				curPostion_1 = this.offsetLeft;
				out();
			}
		};
		li.onmouseout=function(){
			clearTimeout(timer);
			if (curPostion < navCur.offsetLeft)
			{
				curPostion_1 = curPostion;
				out();
			}
			else
			{
				thisLeft  = curPostion;
				hover();
			}
		};
	}
	function hover(){
		if (navCur.offsetLeft <= thisLeft)
		{
			var a = Math.max(parseInt((thisLeft - navCur.offsetLeft) / 15), 3);
			navCur.style.left = navCur.offsetLeft + a + "px";
			timer = setTimeout(arguments.callee, 5);
		}
		else
		{
			navCur.style.left = thisLeft + "px";
			clearTimeout(timer);		
		}
	}
	function out(){
		if (navCur.offsetLeft >= curPostion_1)
		{
			var a = Math.max(parseInt((navCur.offsetLeft - curPostion_1) / 15), 3);
			navCur.style.left = navCur.offsetLeft - a + "px";
			timer = setTimeout(arguments.callee, 5);
		}
		else
		{
			navCur.style.left = curPostion_1 + "px";
			clearTimeout(timer);		
		}
	}
	function getId(id){
		return document.getElementById(id)
	}
})();		
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

简单JS滑动的导航效果代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程