jquery滑动导航条无BUG写法

时间：5年前阅读：6048

这种导航条写法，我网上搜了一下类似的：测试过大多是有BUG。我这个是我自已写的，分享给大家！注意：原理这个很重要，这个特效只要原理搞明白了，实现起来就是很容易的！

直接写代码：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#dh{    
				width: 100%;    
				height: 48px;    
				background: #01204F;    
			}    
			#dh ul{    
				width: 980px;    
				height: 48px;    
				border-left: 1px solid darkviolet;    
				border-right: 1px solid darkviolet;    
				margin: 0 auto;    
				position: relative;    
			}    
			#dh ul li{    
				list-style: none;    
				float: left;    
			}    
			#dh ul li a{    
				height: 48px;    
				padding: 0 10px ;    
				color: #FFFFFF;    
				text-align: center;    
				font-size: 16px;    
				line-height: 48px;    
				display: inline-block;    
				text-decoration: none;    
				position: relative;    
				z-index: 2;    
			}    
			#dh ul li a.sy{    
				height: 48px;    
				width: 48px;    
			}    
			#dh ul .ssk{    
				position: absolute;    
				top: 0;    
				left: 0;    
				height: 48px;    
				width: 48px;    
				background: #CC0000;    
			}    
		</style>    
		<script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
				$('li').mouseenter(function(){    
					$('.ssk').stop().animate({left:$(this).offset().left-$('li').eq(0).offset().left},600)    
					$('.ssk').css({width:$(this).width()});    
				})    
				$('li').mouseleave(function(){    
					$('.ssk').stop().animate({left:'0'},600);    
					$('.ssk').css({width:'48px'});    
				})    
			})    
		</script>    
	</head>    
	<body>    
		<div id="dh">    
			<ul>    
				<li><a href="" class="sy"   style="background: #CC0000;">首页</a></li>    
				<li><a href="">要闻</a></li>    
				<li><a href="">视频</a></li>    
				<li><a href="">娱乐新闻</a></li>    
				<li><a href="">财经</a></li>    
				<li><a href="">游戏</a></li>    
				<li><a href="">体育</a></li>    
				<li><a href="">军事</a></li>    
				<li><a href="">NBA</a></li>    
				<li><a href="">国际</a></li>    
				<li><a href="">科技</a></li>    
				<li><a href="">财经</a></li>    
				<li><a href="">汽车</a></li>    
				<li><a href="">时尚</a></li>    
				<div class="ssk"></div>    
			</ul>    
		</div>    
	</body>    
</html>

上面代码效果静态图片：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery滑动导航条无BUG写法

网友评论