您的当前位置：首页正文

javascript如何实现小球跳动效果

2020-11-27 来源：哗拓教育

这次给大家带来javascript如何实现小球跳动效果，javascript实现小球跳动效果的注意事项有哪些，下面就是实战案例，一起来看一下。

今天介绍的是一种通过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指向的作用域，希望这些对你的学习能有所帮助。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！