<!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.6.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);
});
}