欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript如何实现小球跳动效果

程序员文章站 2022-04-22 16:36:12
...

这次给大家带来javascript如何实现小球跳动效果,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)
            }

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


javascript如何实现小球跳动效果


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

<!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如何实现小球跳动效果的详细内容,更多请关注其它相关文章!