原生js实现弹跳小球原生js实现弹跳小球

突发奇想，写了个小球来回弹跳的案例，供大家参考，具体内容如下
主要就是利用了margin-left / top 值进行位移，当然，也可以使用定位去做。
本案例所用到的有：

DOM元素获取
DOM样式操作
.offsetWidth 获取元素宽度
.offsetHeight 获取元素高度
setInterval() 定时器

上代码
整体使用原生js

//style样式* {margin: 0; padding: 0; }#box {width: 500px; height: 600px; background-color: #eee; box-shadow: 0 0 10px 0 #000; margin: auto; overflow: hidden; position: relative; margin-top: 50px; }#box div {width: 50px; height: 50px; border-radius: 50%; background-color: #fff; position: absolute; }

整个方法中，最主要的就是理解元素位置与容器边界的检测与判断，这一部分搞懂，剩下的就很简单了。
有个小提示：容器不要设置成标准的正方形，不然会因为角度的原因，小球只能从左上角到右下角来回弹动。
整个方法都已封装，需要用时，只需要复制整个方法或者外链进去然后直接使用方法名依照对应参数调用即可。一个元素一次调用. 闲麻烦可直接写一个for循环去循环调用。
抛个砖：