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制作的网页侧边弹出框思路及实现代码
May 21 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
Vue2.0生命周期的理解
Aug 20 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
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
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
JS实现页面侧边栏效果探究
2021/01/08 Javascript
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python处理数据,存进hive表的方法
2018/07/04 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python元组知识点总结
2019/02/18 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
村党支部公开承诺书
2014/05/29 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
先进工作者推荐材料
2014/12/23 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
Java对文件的读写操作方法
2022/04/29 Java/Android