JAVASCRIPT&amp;CSS之RUN SUN

2024-04-27 15:16:12

字體：大中小

供稿：網(wǎng)友

<!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=UTF-8"><script class="jquery library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/Javascript">$(document).ready(function(){  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()*3000)+1);    $(this).delay(wait).animate({      top: '0px',      opacity: 1    },1000);  });}  </script><title>SUN</title><style type="text/css">body {	margin: 50px;	background-color: #2C3437;}.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: #FFF;	display: inline-block;	float: right;	margin: 2px;}</style><body><p style="color:red; font-size:24px;">SUN</p><div class='content'>  <div style='padding-right:20px'>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:122px'> </div>  </div>  <div style='padding-right:20px'>    <div style='margin-right:142px'> </div>  </div>  <div style='padding-right:20px'>    <div style='margin-right:142px'> </div>  </div>  <div style='padding-right:20px'>    <div style='margin-right:142px'> </div>  </div>  <div style='padding-right:20px'>    <div style='margin-right:122px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>  <div style='padding-right:0'>    <div></div>  </div>  <div style='padding-right:0'>    <div style="margin-right:-22px"></div>  </div>  <div style='padding-right:0'>    <div style="margin-right:-22px"></div>  </div>  <div style='padding-right:0'>    <div style="margin-right:-22px"></div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:122px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div></div><div class='content'>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:202px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div style='margin-right:162px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div style='margin-right:162px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div style='margin-right:162px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div style='margin-right:162px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div style='margin-right:162px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div style='margin-right:162px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div style='margin-right:162px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div style='margin-right:162px'> </div>  </div>  <div style='padding-right:20px'>    <div></div>    <div style='margin-right:162px'> </div>  </div>  <div style='padding-right:40px'>    <div></div>    <div style='margin-right:122px'> </div>  </div>  <div style='padding-right:60px'>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div></div><div class='content'>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:202px'> </div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:182px' class='play'> </div>    <div></div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:162px' class='play'> </div>    <div style='margin-right:22px'> </div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:142px' class='play'> </div>    <div style='margin-right:42px'> </div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:122px' class='play'> </div>    <div style='margin-right:62px'> </div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:102px' class='play'> </div>    <div style='margin-right:82px'> </div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:82px' class='play'> </div>    <div style='margin-right:102px'> </div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:62px' class='play'> </div>    <div style='margin-right:122px'> </div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:42px' class='play'> </div>    <div style='margin-right:142px'> </div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:22px' class='play'> </div>    <div style='margin-right:162px'> </div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:2px' class='play'> </div>    <div style='margin-right:182px'> </div>  </div>  <div style='padding-right:0'>    <div></div>    <div style='margin-right:202px'> </div>  </div></div></body></html>