有时候我们打开一个网页上会看见一个图片在屏幕上弹来弹去，
那这个东西是如何实现的呢？今天我们就来实现一下弹力球
首先你要有一个想法，想让你的球怎么弹，每次移动多少距离
找到你想弹得那个球
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毫秒下的状态
看完本篇如果对你用帮助的话，请点一下关注吧
