水平菜单栏的动画效果实现

最新推荐文章于 2023-03-20 15:46:53 发布

原创最新推荐文章于 2023-03-20 15:46:53 发布 · 518 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

14 篇文章

订阅专栏

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>水平导航</title>
	<style type="text/css">
	*{margin: 0;padding: 0;font-size: 14px}
	a{color:#333;text-decoration:none}
	.nav{list-style: none;height: 30px; margin-top: 20px; padding-left: 50px;border-bottom: 5px solid #f60;}
	.nav li{float: left;}
	.nav li a{display: block; width:100px; text-align:center; background: #efefef;height: 30px;line-height: 30px;margin-left: 1px}
	.nav li a.on,.nav li a:hover{background: #f60;color: #fff; }
	</style>
	<script type = "text/javascript" >
		window.onload = function() {
			var aA = document.getElementsByTagName('a');
			for (var i = 0; i < aA.length; i++) {
				aA[i].onmouseover = function() {
					if (this.className != "on") {
						clearInterval(this.timer);
						var This = this;
						This.time = setInterval(function() {
							This.style.width = This.offsetWidth + 10 + "px";
							if (This.offsetWidth >= 140)
								clearInterval(This.time);
						}, 100)
					}
				}
				aA[i].onmouseout = function() {
					if (this.className != "on") {
						clearInterval(this.time);
						var This = this;
						this.time = setInterval(function() {
							This.style.width = This.offsetWidth - 10 + "px";
							if (This.offsetWidth <= 100) {
								This.style.width = '100px';
								clearInterval(This.time);
							}
						}, 100)
					}
				}
			};
		}
		// <script>
		// $(function(){
		// 	$('a').hover(function() {
		// 		$(this).stop().animate({"width":"140px"}, 200);
		// 	}, function() {
		// 		$(this).stop().animate({"width":"100px"}, 200);
		// 	});
		// })
	</script>
	</script>
	
</head>
<body>
	<ul class="nav">
		<li>
			<a class="on" href="#">首　　页</a>
		</li>
		<li>
			<a href="#">慕课发现</a>
		</li>
		<li>
			<a href="#">全部课程</a>
		</li>
		<li>
			<a href="#">学习计划</a>
		</li>
		<li>
			<a href="#">顶尖分享</a>
		</li>
	</ul>
</body>
</html>