您的位置：首页 > Web前端 > JavaScript

JAVASCRIPT&CSS之RUN SUN

2017-02-09 08:40 537 查看


<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JAVASCRIPT CSS RUN SUN
相关文章推荐
新的分享
章节导航