<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0;padding:0;} .one{width: 800px;height: 400px;border: 1px solid gray;margin: 0 auto;position: relative;} .one>div{border-radius: 50%;position: absolute;} </style> <script src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.easing.min.js"></script> </head> <body> <div class="one"></div> <script type="text/javascript"> $(function(){ //创建一个随机函数 function randFn(min,max){ return parseInt(Math.random()*(max-min)+min); } //创建小球的属性 function Ball(){ this.r=randFn(1,20); this.x=randFn(0,$(".one").width()-this.r*2); this.y=randFn(0,$(".one").height()-this.r*2); this.c="rgba("+randFn(0,255)+","+randFn(0,255)+","+randFn(0,255)+","+"0.5)"; this.speedX=randFn(-10,10); this.speedY=randFn(-6,6); this.div=$("<div></div>"); } //画小球 Ball.prototype.draw=function(){ this.div.css({ this.r*2, height:this.r*2, background:this.c, left:this.x, top:this.y }) $(".one").append(this.div); } Ball.prototype.run=function (){ if(this.speedX==0){ this.speedX=-4 } if(this.speedY==0){ this.speedY=-6 } if(this.x<0||this.x>800-this.r*2){ this.speedX *=-1 } if(this.y<0||this.y>400-this.r*2){ this.speedY *=-1 } this.x+=this.speedX; this.y+=this.speedY; this.div.css({ left:this.x, top:this.y }) } //创建一个数组 var ballArr=[]; for (var i = 0; i < 200; i++) { var ball=new Ball(); ballArr.push(ball); ball.draw(); }; //定时器 setInterval(function(){ for (var i = 0; i < ballArr.length; i++) { ballArr[i].run(); }; },100) }) </script> </body> </html>
