JS 滑动菜单示例

最新推荐文章于 2022-11-02 23:13:59 发布

袁忠

最新推荐文章于 2022-11-02 23:13:59 发布

阅读量452

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML + CSS JS JQUERY

本文链接：https://blog.youkuaiyun.com/u010168409/article/details/40593703

HTML + CSS 同时被 2 个专栏收录

30 篇文章

订阅专栏

JS JQUERY

28 篇文章

订阅专栏

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>html模板</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">
		<script type="text/javascript" src="f:/java/js/jquery.js"> </script>
		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{color:#666;font-size:16px;font-family:"微软雅黑";}
			a{text-decoration:none;}
			.box{width:1190px;height:36px;margin:100px auto;border-bottom:3px solid #ccc;position:relative;}
			.box ul li{list-style:none;float:left;width:80px;line-height:36px;text-align:center;}
			.box a{color:#666;}
			.box .sel{width:80px;height:4px;background:#666;display:block;position:absolute;left:0;bottom:-3px;}
		</style>

	</head>
<body>


	<div class="box">
		<ul>
			<li><a href="javascript:void(0);">首页</a></li>
			<li><a href="javascript:void(0);">编程开发</a></li>
			<li><a href="javascript:void(0);">职业技能</a></li>
			<li><a href="javascript:void(0);">网络营销</a></li>
			<li><a href="javascript:void(0);">生活百科</a></li>
			<li><a href="javascript:void(0);">英语教程</a></li>
			<li><a href="javascript:void(0);">泰语教程</a></li>
			<li><a href="javascript:void(0);">投资理财</a></li>
			<li><a href="javascript:void(0);">时尚健康</a></li>
			<li><a href="javascript:void(0);">公务员</a></li>
			<li><a href="javascript:void(0);">财会教程</a></li>
			<li><a href="javascript:void(0);">工程教程</a></li>
			<li><a href="javascript:void(0);">其  它</a></li>
			
		</ul>
		<p class="sel"></p>
	</div>


<script type="text/javascript"> 
	$(".box").find("li").hover(function(){
		var _left = ($(window).width() - 1190) / 2;
		var _sel = $(this).offset().left - _left;
		$(".sel").stop().animate({left:_sel},300);
	
	});

</script>
</body>
</html>