jquery clone 与 clone(true) 的区别

最新推荐文章于 2020-08-13 11:05:50 发布

Whisper_a

最新推荐文章于 2020-08-13 11:05:50 发布

阅读量728

点赞数

本文链接：https://blog.csdn.net/Whisper_a/article/details/21105005

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Flappy bird</title>
	<script src="jquery-1.8.0.js"></script>
	<style type="text/css">
		#xc{
			width:300px;
			height:600px;
			margin:0 auto;
			background-color:#FFFFFF;
			position:absolute;
			left:230px;
			z-index:10;
		}
		#cj{
			width:300px;
			height:500px;
			margin:0 auto;
			background-color:#00CCCC;
			border:double;
		}
		#bird{
			background:url(bird.png);
			width:50px;
			height:50px;
			margin-top:200px;
			display:inline-block;
			float:left;
			margin-left:50px;
			
		}
		.obs{
			background-color:#333333;	
			width:50px;
			height:500px;
			position:absolute;
			left:750px;
			
		}
		.ob{
			background:url(pipe.png);
			width:50px;
			height:50px;
		}
	</style>
</head>

<body>
	<div id="xc"></div>
	<div id="cj">
		<div id="bird">
		
		</div>
		<div class="obs">
			<div class="ob"></div>
			<div class="ob"></div>
			<div class="ob"></div>
			<div class="ob"></div>
			<div class="ob"></div>
			<div class="ob"></div>
			<div class="ob"></div>
			<div class="ob"></div>
			<div class="ob"></div>
			<div class="ob"></div>
		</div>
	</div>
	<script type="text/javascript">
		function getRandom(n){
			return Math.floor(Math.random()*n+1)
		}
		function checkAnimate(e){
			if(e.which  == 13){
				$(".obs").animate({left:'-=300'},3000);
			}
		}
		var obs= $(".ob");
		var r1 = getRandom(7);
		obs.eq(r1).css("visibility","hidden");
		obs.eq(r1+1).css("visibility","hidden");
		
		$("body").keydown(function(e){
			checkAnimate(e);
			if(obs.offset().left == 450){
				var cl = $(".obs").clone(false);
				$("body").append(cl.css("left","750px").css('top',"10px"));
				cl.animate({left:'-=300'},3000);
			}
		
		})
	</script>
</body>
</html>

今天写Flappy bird的时候发现的

clone , clone(true)的区别在于，clone(ture)除了克隆集合，还会克隆click句柄即会克隆事件，触发被克隆对象的监听器