JAVASCRIPT&CSS之RUN SUN

来源：互联网发布：奇异值分解 svd逆矩阵编辑：程序博客网时间：2024/06/09 02:32
<!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>
1 0