会动的云朵案例
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>会动的云朵</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{background: url("bg.jpg") no-repeat center top #ccc;}
.yun{width: 350px;height: 150px;background: url(yun1.png) no-repeat;position: relative;left: 500px;top: 10px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".yun").animate({
opacity: "0",
left: Math.random()*500,
},10000);
$(".yun").animate({
opacity: "1",
left: Math.random()*1000,
},10000);
$(".yun").click(function(){
$(this).stop();
})
})
</script>
</head>
<body>
<div class="yun"></div>
</body>
</html>1,设置背景图片bg.jpg，蓝天白云，居中，不重复显示，多余背景色为灰色#ccc
body{background: url("bg.jpg") no-repeat center top #ccc;}2,设置div的大小，背景图片云朵yun.png，不重复显示，相对定位，距离左边500px，距离上边10px
.yun{width: 350px;height: 150px;background: url(yun1.png) no-repeat;
position: relative;left: 500px;top: 10px;}3,设置div云的动画效果，距离左边距离，Math.random()*500为随机0~1*500，速度10000
$(".yun").animate({
opacity: "0",
left: Math.random()*500,
},10000)
