顶部滑出大图效果

时间：6年前阅读：4221

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			img{    
				display: block;    
				margin: 0 auto;    
			}    
			#top_tu{    
				margin-top: -460px;    
			}    
		</style>    
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
//				他margin-top本来是-460的,设成0   3000毫秒时间让它慢慢下来    
				$('#top_tu').animate({'margin-top':'0px'},3000,function(){    
////					用一个定时炸弹来控制它多等一下,延迟才执行回调函数    
//					setTimeout(function(){    
////					下来之后,结束上面的:用一个回调函数马上反应    
//					$('#top_tu').animate({'margin-top':'-460px'},3000);	
    
//					},3000)    
//					有更简单的方法: delay()延迟    delay一般写在运动之前，表示让后面的运动延迟多久执行    
					$('#top_tu').delay(3000).animate({'margin-top':'-460px'},3000);	
    
				});    
			})    
		</script>    
	</head>    
	<body>    
		<img src="https://www.qiquanji.com/data/img/dmj/201903081552011069126353.jpg" id="top_tu"/>    
		<img src="https://www.qiquanji.com/data/img/dmj/201903081552011069685244.jpg"/>    
	</body>    
</html>

代码效果点上面的（运行代码）来看

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

微信扫码关注

更新实时通知

顶部滑出大图效果

网友评论