简单弹力球的实现

有时候我们打开一个网页上会看见一个图片在屏幕上弹来弹去，

那这个东西是如何实现的呢？今天我们就来实现一下弹力球

首先你要有一个想法，想让你的球怎么弹，每次移动多少距离

找到你想弹得那个球

var bull = document.getElementById('bull')

这是你每次想要移动的距离

var stepX = 10;

var stepY = 10;

我们还需要一个定时器setInterval，所有需要的条件都在这个定时器里面

var timer = setInterval (function () {

var top = bull.offsetTop;

var left = bull.offsetLeft;

var w  = bull.offsetWidth;

var h = bull.offsetHeight;

//这里取一下当前窗口的宽高及球距离left和top的距离

var bulla = document.body.clientHeight || document.documentElement.clientHeight;

var bullb = document.body.clientWidth || document.documentElement.clientWidth;

//求这个球移动后距离left和top的大小

var lefts = left + stepX;

var tops = top + stepY;

//使这个球等于下次移动后的位置

bull.style.top = tops + 'px';

bull.style.left = lefts + 'px';

//使这个定时器17毫秒执行一次，因为17毫秒是人眼刷新的时间

//可更改

},17);

写到这里就会发现这个球已经会动了，但是这个球动着动着就会跑的屏幕的外面，

这该怎么办呢？

我们要给它加上一个边界值，使这个球到达边界值时让这个球回弹，要不怎么叫弹力球呢[滑稽]。

//这里取一下当前窗口的宽高及球距离left和top的距离

var bulla = document.body.clientHeight || document.documentElement.clientHeight;

var bullb = document.body.clientWidth || document.documentElement.clientWidth;

        //若本次移动或下次移动后top的值大于或等于窗口的高度减去球的高度时，使移动的距离为负值，然后重置下次移动的数值，使其向反方向移动

        if (tops >= bulla - h) {

            stepY *= -1;

            tops = bulla - h;

        }

        //若本次移动或下次移动后top的值小于或等于0时，使移动的距离为正值并重置

        if (tops <= 0) {

            stepY *= -1;

            tops = 0;

        }

        //若本次移动或下次移动后top的值大于等于窗口的宽度减去球的宽度时，使其向反方向移动

        if (lefts >= bullb - w) {

            stepX *= -1;

            lefts = bullb - w;

        }

        //若本次移动或下次移动后top的值小于或等于0时，使移动的距离为正值并重置

        if (lefts <= 0) {

            stepX *= -1;

            lefts = 0;

        }

到这里我们就已经把弹力球实现了；我们可以把内容改为自己想要的东西（广告、文字、图片等）；

图片来自个人上传

100毫秒下的状态

看完本篇如果对你用帮助的话，请点一下关注吧

图片来自网络