javascript如何实现小球跳动效果-js教程-PHP中文网

这次给大家带来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)
            }

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

这里写图片描述