<!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://ss.netnr.com/jquery@3.7.1/dist/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>
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;
}
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);
});
}