JS实现小球的弹性碰撞效果


Posted in Javascript onNovember 11, 2017

一、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实现小球的弹性碰撞效果 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
jQuery的事件预绑定
Dec 05 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 #Javascript
JS Input里添加小图标的两种方法
Nov 11 #Javascript
fetch 使用及如何接收JS传值
Nov 11 #Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 #Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 #Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 #Javascript
You might like
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
学习PHP session的传递方式
2016/06/15 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
js中replace的用法总结
2013/12/27 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Python读写zip压缩文件的方法
2018/08/29 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
初级Java程序员面试题
2016/03/03 面试题
给儿子的表扬信
2014/01/15 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
英语系毕业生求职信
2014/07/13 职场文书
关于召开会议的通知
2015/04/15 职场文书
人民的好儿女观后感
2015/06/18 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL