Description
CDN Search
75CDN jsDelivr
<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<meta charset="utf-8" />
	<meta name="referrer" content="never">

	<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>

	<title>NetnRun Demo</title>

</head>

<body>
	<div class='content'>
		<div style='padding-right:40px'>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div style='padding-right:20px'>
			<div></div>
			<div></div>
			<div style='margin-right:122px'>
			</div>
		</div>
		<div>
			<div></div>
			<div></div>
			<div style='margin-right:142px'></div>
		</div>
		<div>
			<div></div>
			<div style='margin-right:82px' class="play"></div>
			<div class="play"></div>
			<div style='margin-right:42px'></div>
		</div>
		<div>
			<div></div>
			<div style='margin-right:62px' class="play"></div>
			<div class="play"></div>
			<div class="play"></div>
			<div style='margin-right:42px'></div>
		</div>
		<div>
			<div></div>
			<div style='margin-right:42px' class="play"></div>
			<div class="play"></div>
			<div class="play"></div>
			<div class="play"></div>
			<div style='margin-right:42px'></div>
		</div>
		<div>
			<div></div>
			<div style='margin-right:62px' class="play"></div>
			<div class="play"></div>
			<div class="play"></div>
			<div style='margin-right:42px'></div>
		</div>
		<div>
			<div></div>
			<div style='margin-right:82px' class="play"></div>
			<div class="play"></div>
			<div style='margin-right:42px'></div>
		</div>
		<div>
			<div style='margin-right:22px'></div>
			<div style='margin-right:142px'></div>
		</div>
		<div>
			<div style='margin-right:42px'></div>
			<div></div>
			<div style='margin-right:102px'></div>
		</div>
		<div>
			<div style='margin-right:62px'></div>
			<div></div>
			<div style='margin-right:82px'></div>
		</div>
		<div>
			<div style='margin-right:42px'></div>
			<div></div>
			<div style='margin-right:102px'></div>
		</div>
		<div>
			<div style='margin-right:22px'></div>
			<div></div>
			<div style='margin-right:122px'></div>
		</div>
		<div>
			<div></div>
			<div></div>
			<div style='margin-right:142px'></div>
		</div>
		<div>
			<div></div>
			<div style='margin-right:162px'></div>
		</div>
	</div>
</body>

</html>
animate();
$(".play").click(animate).mouseover(function () {
  $(".play").css({ "background-color": "#A55" });
}).mouseout(function () {
  $(".play").css({ "background-color": "#060" });
});
function animate() {
  $('div>div>div').each(function (id) {
    $(this).css({
      position: 'relative',
      top: '-200px',
      opacity: 0
    });
    var wait = Math.floor((Math.random() * 2500) + 1);
    $(this).delay(wait).animate({
      top: '0px',
      opacity: 1
    }, 1000);

  });
}
body {
	margin:30px;
  	background-color:#1e1e1e;
}
.content {
	display:inline-block;
	width:350px;
	height:239px;
	margin-right:-4px;
}
.play {
	cursor:pointer;
	background-color:#060;
}
div>div {
	display:block;
	height:20px;
}
div>div>div {
	width:16px;
	height:16px;
	background-color:rgb(57, 142, 182);
	float:right;
	margin:2px;
}