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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
Javascript动画效果(3)
Oct 11 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 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去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
nginx下安装php7+php5
2016/07/31 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python 字符串换行的多种方式
2018/09/06 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
明信片寄语大全
2014/04/08 职场文书
病媒生物防治方案
2014/05/13 职场文书
2014年大学生工作总结
2014/11/20 职场文书
2014年检验科工作总结
2014/11/22 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
创业计划书之废品回收
2019/09/26 职场文书
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server