JS实现小球的弹性碰撞效果
更新时间：2017年11月11日 15:17:16 作者：我吃小月饼
这篇文章主要介绍了JS实现小球的弹性碰撞效果 ,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
一、HTML代码（body部分）
<body>
<!--只需要做一个大div包裹几个小div即可，你想要几个小球碰撞就在内部做几个div即可，这里我们做了6个小球-->
<div id="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
上面body部分这样就算是完成了，下面我们给body中的div做一些小样式。
二、CSS小球样式部分
<style type="text/css">
/*将body默认的margin和padding部分去掉*/
*{
margin: 0px;
padding: 0px;
}
/*采用定位的方式，让小球运动起来*/
#main{
margin: 0px auto;
position: relative;
}
/*小球的样式*/
#main div{
overflow: hidden;
position: absolute;
width: 80px;
height: 80px;
opacity: 0.5;
border-radius: 50%;
background-color: red;
}
</style>
小球是要运动起来的，我们通过给小球和它的父元素添加定位，最后用js改变其top、bottom、left、right值来让小球运动。现在我们小球的样式已经做好了，下面的js代码才是重中之重。
3.1 Android 事件基础知识
其实，我们通过上面的代码就可以完全实现一个小球碰撞检测的功能了。但是仅仅是上面的代码，还是会存在一定的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;
}
以上是一个计算滚动条宽度的函数，此函数可以计算右侧滚动条的宽度，我们只需要在“根据浏览器窗口的大小自动调节小球的运动空间”上面，调用此函数
var scrollbarWidth = getScrollbarWidth(); 再修改小球的最大运动宽度 maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth ;这样这个bug就修改好了。
总结
以上所述是小编给大家介绍的JS实现小球的弹性碰撞效果 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
遇到了操作iframe的相关问题，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数，下面与大家分享下操作iframe兼容各种浏览器的方法2013-07-07
这篇文章主要介绍了JavaScript前端开发之实现二进制读写操作的相关资料,需要的朋友可以参考下2015-11-11
这篇文章主要为大家详细介绍了JavaScript实现简易左右点击切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JS实现从网页顶部掉下弹出层效果的方法,实例分析了javascript创建弹出窗口及窗口掉落与抖动效果实现方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JS实现根据详细地址获取经纬度功能,涉及javascript与百度地图接口交互进行地址经纬度查询的相关操作技巧,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了javascript实现按回车键切换焦点的方法,需要的朋友可以参考下2015-02-02
数组去重复是一个常见的需求，我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法，网上基本都有，这里只是简单地总结一下分享给大家。2015-04-04
这篇文章主要为大家详细介绍了JavaScript实现音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
javascript数组includes、reduce的基本使用
这篇文章主要给大家介绍了关于javascript数组includes、reduce的基本使用方法,includes方法是用于检查特定元素是包含在数组还是字符串中的方法,而reduce用法则有很多,需要的朋友可以参考下2021-07-07
本篇文章主要介绍了微信小程序之小豆瓣图书实例，具有一定的参考价值，有兴趣的同学可以了解一下。2016-11-11
最新评论