原创 xi823416 随笔 DOM381 阅读 2014-10-22 10:47:36
原理: 移动物体是否和另一物体碰撞, 其实解释判断 2 个元素边的位置是否重叠或者超出
- document.onmousemove=function(ev) {
- var ev = ev || event;
- var L=ev.clientX-disx;
- var T=ev.clientY-disy;
L1: 移动元素的左侧的边距离网页左边的距离 也就是 offsetleft
R1: 右测的边距离网页左边的距离 offsetLeft + 元素宽
T1: 顶部边距离网页顶部距离
B1: 底部的边距离网页顶部的距离 offsetTOp + 元素高
L2 R2 B2 T2 是判断是否跟她碰撞元素的边 意思同上
- var L1=L;
- var R1=L+odiv.offsetWidth;
- var T1=T;
- var B1=T+odiv.offsetHeight;
- var L2=odiv2.offsetLeft;
- var R2=L2+odiv2.offsetWidth;
- var T2=odiv2.offsetTop;
- var B2=T2+odiv2.offsetHeight;
- if(R1<L2 || L1>R2 || B1<T2 || T1>B2) { // 如果移动元素右侧边检测元素左侧边 或者 移动元素左侧边大于检测元素右侧 或者 移动的底边检测的定边 移动的顶部检测底边
- // 以上情况移动元素分别在检测元素的 左部, 右部, 顶部, 底部, 这些情况都是没有碰撞的.
- odiv2.style.background='#000'
- } else {
- odiv2.style.background='green' // 排除以上情况就是碰撞的
- }
来源: http://www.qdfuns.com/article/15742/0ef61fccd9ae2458c851481db9326ce9.html