小小动画

<script src="JS/jquery-1.7.2.min.js"></script><style type="text/css">* {margin: 0px;padding: 0px;}#dw {position: absolute;width: 200px;height: 70px;font-family: 迷你简书魂;font-size: 50px;}#zhezhao {position: absolute;width: 100%;height: 100%;display: none;background-color: black;filter: alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;}#qiu1,#qiu2,#qiu3,#qiu4,#qiu5,#qiu6,#qiu7,#qiu8,#qiu9,#qiu10 {position: absolute;top: -100px;width: 30px;height: 30px;background-color: red;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;}</style><script>$(document).ready(function () {$("#dw").click(function () {var idzz = $("#zhezhao").attr("id");idzz = "#" + idzz;var idqiu1 = $("#qiu1").attr("id");idqiu1 = "#" + idqiu1;var idqiu2 = $("#qiu2").attr("id");idqiu2 = "#" + idqiu2;var idqiu3 = $("#qiu3").attr("id");idqiu3 = "#" + idqiu3;var idqiu4 = $("#qiu4").attr("id");idqiu4 = "#" + idqiu4;var idqiu5 = $("#qiu5").attr("id");idqiu5 = "#" + idqiu5;var idqiu6 = $("#qiu6").attr("id");idqiu6 = "#" + idqiu6;var idqiu7 = $("#qiu7").attr("id");idqiu7 = "#" + idqiu7;var idqiu8 = $("#qiu8").attr("id");idqiu8 = "#" + idqiu8;var idqiu9 = $("#qiu9").attr("id");idqiu9 = "#" + idqiu9;var idqiu10 = $("#qiu10").attr("id");idqiu10 = "#" + idqiu10;aa(idzz, idqiu1, 130);aa(idzz, idqiu2, 120);aa(idzz, idqiu3, 110);aa(idzz, idqiu4, 130);aa(idzz, idqiu5, 120);aa(idzz, idqiu1, 110);aa(idzz, idqiu2, 130);aa(idzz, idqiu3, 120);aa(idzz, idqiu4, 110);aa(idzz, idqiu5, 130);$("#zhezhao").click(function () {$(this).css("display", "none");});});});function aa(idzz, idqiu, time) {$(idzz).css("display", "block");$(idqiu).animate({ top: "600px" }, time, function () {$(idqiu).css("background-color", "aqua");}).animate({ top: "0px", left: "50px" }, time, function () {$(idqiu).css("background-color", "yellow");}).animate({ top: "580px", left: "100px" }, time, function () {$(idqiu).css("background-color", "blue");}).animate({ top: "20px", left: "150px" }, time, function () {$(idqiu).css("background-color", "green");}).animate({ top: "560px", left: "200px" }, time, function () {$(idqiu).css("background-color", "red");}).animate({ top: "40px", left: "250px" }, time, function () {$(idqiu).css("background-color", "indigo");}).animate({ top: "520px", left: "300px" }, time, function () {$(idqiu).css("background-color", "violet ");}).animate({ top: "60px", left: "350px" }, time, function () {$(idqiu).css("background-color", "aqua ");}).animate({ top: "500px", left: "400px" }, time, function () {$(idqiu).css("background-color", "yellow ");}).animate({ top: "80px", left: "450px" }, time, function () {$(idqiu).css("background-color", "yellow");}).animate({ top: "480px", left: "500px" }, time, function () {$(idqiu).css("background-color", "blue");}).animate({ top: "100px", left: "550px" }, time, function () {$(idqiu).css("background-color", "green");}).animate({ top: "460px", left: "600px" }, time, function () {$(idqiu).css("background-color", "red");}).animate({ top: "120px", left: "650px" }, time, function () {$(idqiu).css("background-color", "indigo");}).animate({ top: "440px", left: "700px" }, time, function () {$(idqiu).css("background-color", "violet ");}).animate({ top: "140px", left: "750px" }, time, function () {$(idqiu).css("background-color", "aqua ");}).animate({ top: "420px", left: "800px" }, time, function () {$(idqiu).css("background-color", "yellow ");}).animate({ top: "160px", left: "850px" }, time, function () {$(idqiu).css("background-color", "red ");}).animate({ top: "400px", left: "900px" }, time, function () {$(idqiu).css("background-color", "violet ");}).animate({ top: "180px", left: "950px" }, time, function () {$(idqiu).css("background-color", "indigo ");}).animate({ top: "380px", left: "1000px" }, time, function () {$(idqiu).css("background-color", "blue ");}).animate({ top: "200px", left: "1050px" }, time, function () {$(idqiu).css("background-color", "red ");}).animate({ top: "360px", left: "1100px" }, time, function () {$(idqiu).css("background-color", "yellow ");}).animate({ top: "220px", left: "1150px" }, time, function () {$(idqiu).css("background-color", "aqua ");}).animate({ top: "340px", left: "1150px" }, time, function () {$(idqiu).css("background-color", "indigo ");}).animate({ top: "240px", left: "1200px" }, time, function () {$(idqiu).css("background-color", "violet ");}).animate({ top: "320px", left: "1250px" }, time, function () {$(idqiu).css("background-color", "blue ");}).animate({ top: "260px", left: "1300px" }, time, function () {$(idqiu).css("background-color", "red");}).animate({ top: "600px", left: "1330px" }, time, function () {$(idqiu).css("background-color", "green");}).animate({ top: "-400px", left: "1330px" }, time);};</script>
</head>
<body><input type="button" value="点我" id="dw" /><div id="zhezhao"></div><div id="qiu1"></div><div id="qiu2"></div><div id="qiu3"></div><div id="qiu4"></div><div id="qiu5"></div><div id="qiu6"></div><div id="qiu7"></div><div id="qiu8"></div><div id="qiu9"></div><div id="qiu10"></div>
</body>