这次分享的是一个运动小球在屏幕里面来回运动的示例：

样式:

<style type="text/css">

*{margin:0;padding:0;}

body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}

a{text-decoration:none;}

img{border:none;}

ol,ul{list-style:none;}

.ball{

position: absolute;

left: 0;

top: 0;

width: 80px;

height: 80px;

background: -webkit-radial-gradient(rgb(225,225,225),rgb(225,0,0));

border-radius: 50%;

}

</style>

定义的小球：

<div class="ball"></div>

实现的方法：

<script>

        var oBall = document.querySelector(".ball"),

            //添加小球的left top 的变化量(速度)

            leftVal = 6,

            topVal = 6;

        //获取小球的活动范围  最大宽 最大高

        var maxW = document.documentElement.clientWidth - oBall.clientWidth;

        var maxH = document.documentElement.clientHeight - oBall.clientHeight;

        play();

        setInterval(play,13);

        function play(){

            //获取当前小球的left / top 值

            var sLeft = oBall.offsetLeft;

            var sTop = oBall.offsetTop;

            //不断改变小球的left  top 值

            var left = sLeft + leftVal;

            var top = sTop + topVal;

            //判断left是否大于最大值,是否碰撞右边边界

            if(left >= maxW || left <= 0){

                left = Math.min(left,maxW);

                left = Math.max(left,0);

                leftVal = -leftVal;

            };

            if(top >= maxH || top <= 0){

                top = Math.min(top,maxH);

                top = Math.max(top,0);

                topVal = -topVal;

            };

            oBall.style.left = left + "px";

            oBall.style.top = top + "px";

        };    

    </script>


项目展示：一个运动的小球
 

著作权归作者所有。 
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：付博瀚
来源：付博瀚个人博客
链接: https://www.fubohan.cn/