1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

jquery滑动导航条无BUG写法

这种导航条写法,我网上搜了一下类似的:测试过大多是有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/post/7668.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: