javascript实现弹球效果

来源：互联网发布：软件开发过程及规范编辑：程序博客网时间：2024/05/04 02:00

javascript实现弹球效果

今天介绍的是一种通过javascript实现的一种炫酷的动画效果，具体实现特效我通过图片展示给大家

弹球释放时候的效果

还有释放后这些小球会在一个指定范围内进行运动，最关键的部分就是这些小球的各种样式都是随机获取的，所以这样才出现了一个炫酷的效果，主要使用到的随机数生成的代码如下：

//获取一个范围内的随机数random返回一个大于0小于1的一个随机数 function selectFrom(Lowervalue,upperValue){ var choices=upperValue-Lowervalue+1; return Math.floor(Math.random()*choices+Lowervalue); }
之后这些小球的各种样式通过随机函数获得，剩下的一部分是就是有关定位方面的，每一个小球都是一个div，其都是绝对定位，通过offsetLeft来获取这些小球的相对于父容器的位置，防止其跑出边界，只要实现方式是，通过offsetLeft获得这个div的相对位置后，在判断当期移动到边界的时候，让这个div的速度等于速度的相反数，

        //设置运行速度            Circle.prototype.run=function(){                var maxLeft=1435-this.r*2;                var maxTop=700-this.r*2;                var that=this;                //使用间隔式计时器                setInterval(function(){                    var left=that.div.offsetLeft + that.speedX;                    var top=that.div.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.div.style.left=left+"px";                    that.div.style.top=top+"px";                },30)            }

之后就看到这些弹球在一个范围内运动的效果了：

这里写图片描述

整个效果的完整代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>躁动的小球</title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            div{                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.div=document.createElement("div");                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设置成该div的一个属性                this.parent=parent;                var style=this.div.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.div);               }            //设置运行速度            Circle.prototype.run=function(){                var maxLeft=1435-this.r*2;                var maxTop=700-this.r*2;                var that=this;                //使用间隔式计时器                setInterval(function(){                    var left=that.div.offsetLeft + that.speedX;                    var top=that.div.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.div.style.left=left+"px";                    that.div.style.top=top+"px";                },30)            }           </script>    </head>    <body>        <div id=""></div>        <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指向的作用域，希望这些对你的学习能有所帮助。

阅读全文

0 0