JS实现小球的弹性碰撞效果
前端之家收集整理的这篇文章主要介绍了
JS实现小球的弹性碰撞效果，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_403_0@
<div class="jb51code">
<pre class="brush:js;">
@H_
403_0@ 上面body部分这样就算是完成了，下面我们给body中的div做一些小样式。
@H_
403_0@
二、CSS小球样式部分
@H_
403_0@ 小球是要运动起来的，我们通过给小球和它的父元素
添加定位，最后用js改变其top、bottom、left、right值来让小球运动。现在我们小球的样式已经做好了，下面的js
代码才是重中之重。
@H_
403_0@
3.1 Android 事件基础知识
@H_
403_0@其实，我们通过上面的
代码就可以完全实现一个小球碰撞检测的
功能了。但是仅仅是上面的
代码，还是会存在一定的bug，就是当整个网站存在右侧滚动条时，当小球碰到屏幕右侧的时候，会出现一瞬的横向滚动条，这就是做网站比较忌讳的了，横向滚动条的出现太丑了。所以我们可以通过以下
代码来
解决。
函数
function getScrollbarWidth() {
var oP = document.createElement("p"),styles = {
width: "100px",height: "100px",overflowY: "scroll"
},i,scrollbarWidth;
for (i in styles) oP.style[i] = styles[i];
document.body.appendChild(oP);
scrollbarWidth = oP.offsetWidth - oP.clientWidth;
oP.remove();
return scrollbarWidth;
}
@H_
403_0@以上是一个计算滚动条宽度的
函数，此
函数可以计算右侧滚动条的宽度，我们只需要在“根据浏览器窗口的大小
自动调节小球的运动空间”上面，
调用此
函数
@H_
403_0@
var scrollbarWidth = getScrollbarWidth(); 再
修改小球的最大运动宽度
maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth ;这样这个bug就
修改好了。
@H_
403_0@
总结
@H_
403_0@以上所述是小编给大家介绍的JS实现小球的弹性碰撞
效果 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时
回复大家的！
