摘要：<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>會動的云朵</title> <script type="text/javascript" src="jquery
<!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,設(shè)置背景圖片bg.jpg，藍(lán)天白云，居中，不重復(fù)顯示，多余背景色為灰色#ccc
body{background: url("bg.jpg") no-repeat center top #ccc;}2,設(shè)置div的大小，背景圖片云朵yun.png，不重復(fù)顯示，相對定位，距離左邊500px，距離上邊10px
.yun{width: 350px;height: 150px;background: url(yun1.png) no-repeat;
position: relative;left: 500px;top: 10px;}3,設(shè)置div云的動畫效果，距離左邊距離，Math.random()*500為隨機(jī)0~1*500，速度10000
$(".yun").animate({
opacity: "0",
left: Math.random()*500,
},10000)
批改老師：韋小寶批改時間：2018-11-28 09:10:34
老師總結(jié)：不錯不錯！jQuery可以實現(xiàn)很多有趣的案例！課后多寫點(diǎn)是好事哦