淡入淡出的动画效果

最新推荐文章于 2021-10-14 16:17:36 发布

BTS__TING

最新推荐文章于 2021-10-14 16:17:36 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/BTS__TING/article/details/103002557

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript"src="js/jquery-1.11.1.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="menu">
			<div style="position: relative;">
			<div style="position: absolute;">
			<ul>
				<li><a href="www.mingribook.com">图书介绍</a></li>
				<li><a href="www.mingribook.com">新书预告</a></li>
				<li><a href="www.mingribook.com">图书销售</a></li>
				<li><a href="www.mingribook.com">刊物发布</a></li>
				<li><a href="www.mingribook.com">资料下载</a></li>
				<li><a href="www.mingribook.com">好书推荐</a></li>
				<li><a href="www.mingribook.com">技术支持</a></li>
				<li><a href="www.mingribook.com">联系我们</a></li>
			</ul>
			</div>
			<img src="menu_bg.gif"width="130"height="310"/>
			</div>
		</div>
		><img src="title.gif"width="50"height="100"id="flag"/>
		<style>
					#menu{
						float: left;
						width: 120px;
						height: 350px;
					}
					#tupian{
						float: left;
					}
					 li{
						float:left;
						width:100px;
						margin-bottom:3px;
						display:block;
						border-bottom:none;
						}
					li a{
						float:left;
						margin-left:0;
						display:block;
						line-height:28px;
						text-decoration:none;
						 }
					li a:hover{
						color:red;
						}
				</style>
		<script type="text/javascript">
			
			$(document).ready(function(){
				$("#flag").mouseover(function(){
					if($("#menu").is(':hidden')){
						$("#menu").show(300);
					}
				});
				$("#menu").hover(null,function(){
					$("#menu").hide(300);
				});
			});
			$(document).ready(function(){
				$("#flag").mouseover(function(){
					$("#menu").fadeIn(2000);
			});
			$("#menu").hover(null,function(){
				$("#menu").fadeOut(2000);
			});
			});
		</script>
	</body>
</html>