欢迎来到酷云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

简单JS滑动的导航

       导航     2016-02-16     eycms     68     0    

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

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; height:27px;width:542px; overflow:hidden;  float:right; margin-right:17px;position:relative ;}

#nav ul{ height:27px; width:100%;  background: url(i/naVbotBdr.gif) repeat-x 0 100%; }

#nav ul li{ width:67px; height:24px; float:left; padding-right:28px; display:inline; cursor:pointer; overflow:hidden}

#nav a{background:#999;width:100%; height:24px; display:block; float:left; outline:none; color:#fff; line-height:24px; text-align:center; font-size:16px; font-weight:bold; overflow:hidden}

#navCur{ position:absolute; left:0; bottom:0; height:3px; color:#F00; width:67px; 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.xxx.cn"  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>


--结束END--

本文链接: http://www.83703228.cn/resources/navigation/1102.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“酷云”
"酷云平台前端开发教学"
每日干货技术分享
 

×

成为 酷云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

酷云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 3206174

客服电话: 0516-83703228

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

酷云平台手机端