今天介绍的是一种通过javascript实现的一种炫酷的动画效果，具体实现特效我通过图片展示给大家
还有释放后这些小球会在一个指定范围内进行运动，最关键的部分就是这些小球的各种样式都是随机获取的，所以这样才出现了一个炫酷的效果，主要使用到的随机数生成的代码如下：
//获取一个范围内的随机数random返回一个大于0小于1的一个随机数 function selectfrom(lowervalue,uppervalue){ var choices=uppervalue-lowervalue+1; return math.floor(math.random()*choices+lowervalue); }
之后这些小球的各种样式通过随机函数获得，剩下的一部分是就是有关定位方面的，每一个小球都是一个p，其都是绝对定位，通过offsetleft来获取这些小球的相对于父容器的位置，防止其跑出边界，只要实现方式是，通过offsetleft获得这个p的相对位置后，在判断当期移动到边界的时候，让这个p的速度等于速度的相反数，
//设置运行速度 circle.prototype.run=function(){ var maxleft=1435-this.r*2; var maxtop=700-this.r*2; var that=this; //使用间隔式计时器 setinterval(function(){ var left=that.p.offsetleft + that.speedx; var top=that.p.offsettop + that.speedy; if(left<=0) { left=0; that.speedx *=-1; } if(top<=0) { top=0; that.speedy *=-1; } if(left>=maxleft) { left=maxleft; that.speedx*=-1; } if(top>=maxtop) { top=maxtop; that.speedy*=-1; } that.p.style.left=left+"px"; that.p.style.top=top+"px"; },30) }
之后就看到这些弹球在一个范围内运动的效果了：
整个效果的完整代码如下：
<!doctype html><html> <head> <meta charset="utf-8"> <title>躁动的小球</title> <style type="text/css"> *{ margin: 0; padding: 0; } p{ border-radius: 50%; position: absolute; } body{ width: 100%; height: 100%; background-image: url(img/1369966956468.jpg) ; background-repeat: no-repeat; } </style> <script type="text/javascript"> //获取一个范围内的随机数random返回一个大于0小于1的一个随机数 function selectfrom(lowervalue,uppervalue){ var choices=uppervalue-lowervalue+1; return math.floor(math.random()*choices+lowervalue); } function circle(){ this.p=document.createelement("p"); this.r=selectfrom(10,40); this.left=selectfrom(0,100); this.top=selectfrom(0,50); this.bg='rgba('+selectfrom(0,255)+','+selectfrom(0,255)+','+selectfrom(0,255)+','+math.random()+')'; this.speedx=selectfrom(-10,10); this.speedy=selectfrom(-8,8); } //绘制小球 circle.prototype.drawcirle=function(parent){ //将parent设置成该p的一个属性 this.parent=parent; var style=this.p.style; style.width=this.r*2+"px"; style.height=this.r*2+"px"; style.left=this.left+"px"; style.top=this.top+"px"; style.backgroundcolor=this.bg; parent.appendchild(this.p); } //设置运行速度 circle.prototype.run=function(){ var maxleft=1435-this.r*2; var maxtop=700-this.r*2; var that=this; //使用间隔式计时器 setinterval(function(){ var left=that.p.offsetleft + that.speedx; var top=that.p.offsettop + that.speedy; if(left<=0) { left=0; that.speedx *=-1; } if(top<=0) { top=0; that.speedy *=-1; } if(left>=maxleft) { left=maxleft; that.speedx*=-1; } if(top>=maxtop) { top=maxtop; that.speedy*=-1; } that.p.style.left=left+"px"; that.p.style.top=top+"px"; },30) } </script> </head> <body> <p id=""></p> <script type="text/javascript"> for(var i=0;i<100;i++) { //这些函数里面涉及原型，通过 circle()函数可以找到指向draw,run函数。 var c = new circle(); c.drawcirle(document.body); c.run(); } </script> </body></html>
这里面还涉及到this的使用，在函数内部再使用另一个函数时，一定要判断当前函数的作用域，分清this指向的作用于域，在内部调用时，在外部可以使用变量来保存当前this指向的作用域，希望这些对你的学习能有所帮助。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
css的常见兼容性问题解决方案
web前端关于浏览器兼容性问题的解决方案
以上就是javascript如何实现小球跳动效果的详细内容。