物体碰撞,勾股定理,唯一还记得的数学知识
来源:互联网 发布:ubuntu双系统引导修复 编辑:程序博客网 时间:2024/05/24 01:58
<div id="wrapBox"> <div class="Ball3">xxxxx</div> <div class="Ball4"></div></div><script> window.addEventListener("load",function(){ ;(function(){ var d1 = document.querySelector(".Ball3"); var d2 = document.querySelector(".Ball4"); var w = { a:d1.offsetWidth/2, b:d2.offsetWidth/2 }; var ballA = { x:d1.getBoundingClientRect().left + w.a, y:d1.getBoundingClientRect().top + w.a } wrapBox.onmousemove = function (e){ d2.style.left = e.pageX- w.b +"px"; d2.style.top = e.pageY- w.b+"px"; var dx = (d2.getBoundingClientRect().left+w.b)-ballA.x; var dy = (d2.getBoundingClientRect().top+ w.b)-ballA.y; var dist = Math.sqrt(dx*dx+dy*dy); if(dist<= w.a+ w.b){ d2.style.backgroundColor = "red"; }else{ d2.style.backgroundColor = "yellow"; } } })(); })</script>
刚开始由于想的不多,上来直接就mouseover,导致球体并不能跟随鼠标快速移动,这个要注意下。
在做之前了解了下面API所带的4个属性,都是相对于对象物体的左边和上边作为基准getBoundingClientRect().leftgetBoundingClientRect().topgetBoundingClientRect().rightgetBoundingClientRect().bottom
阅读全文
0 0
- 物体碰撞,勾股定理,唯一还记得的数学知识
- 物体与曲面的碰撞
- UE4物体的碰撞检测
- 还记得
- 还记得移动的那个MV吗
- 还记得儿时的那片海么?
- 还记得那时候的初恋吗?
- 还记得你的职业梦想吗
- 我还记得你的微笑
- 哥们,还记得当年的梦吗
- 还记得那一年倒水的广搜题嘛~
- 还记得吗?我们的一次见面
- 曾经的你们是否还记得
- 童年的友情你还记得?
- android3D物体的碰撞——正方体的碰撞
- Unity3d中物体的的碰撞检测
- unity2D 忽略物体之间的碰撞
- 控制物体的移动与碰撞检测
- vtigerCRM620 安装教程
- Segue传递数据
- codevs1403 新三国争霸 (最小生成树+dp)
- poi读取excel,支持合并单元格
- js中的touch事件及gesture(手势)事件
- 物体碰撞,勾股定理,唯一还记得的数学知识
- 让webapi统一返回JSON数据格式
- AdMob接入踩坑记
- Gdevops全球敏捷运维峰会-广州站即将于11月召开!
- easyui校验器扩展
- Could not create the view: An unexpected exception was thrown.问题解决
- Java多线程系列--“JUC锁”08之 共享锁和ReentrantReadWriteLock
- 第3章 MySQL基准测试
- 微信启动画面变脸背后:竟然隐藏着这么多秘密!