原生js实现弹跳小球

突发奇想，写了个小球来回弹跳的案例，供大家参考，具体内容如下

主要就是利用了margin-left / top 值进行位移，当然，也可以使用定位去做。

本案例所用到的有：

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

上代码

整体使用原生js

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

抛个砖：

for(var i = 1 ; i<=10;i++){
 collMove(box,cirs[i],i);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。