js 碰撞检测 | 易学教程

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>九宫格碰撞</title>
<style>
#box{ width:300px; height:300px; border:1px solid #ccc; margin:50px auto;}
#box span{ display:block; width:100px; height:100px; float:left; color:#000; font-size:40px; text-align:center; line-height:100px; cursor:pointer; }
#box span.bor{ border:1px dashed #f00; position:absolute;}
</style>

//生成n-m之间的随机数
function rand(n,m){
return parseInt( Math.random()*(m-n+1)+n)
};
//获取样式
function getStyle(obj,attr){
return getComputedStyle()?getComputedStyle(obj,flase)[attr]:obj.getCurrentStyle(attr)
};
//获取坐标
function getPos(obj){
var l=0,t=0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return {left:l,top:t}
}

//设置css
function setAttr(obj,json){
//alert(obj)
for(i in json){
obj.style[i]=json[i];
}
}

function isPeng(obj1,obj2){
var l1 = obj1.offsetLeft,
r1 = obj1.offsetLeft + obj1.offsetWidth,
t1 = obj1.offsetTop,
b1 = obj1.offsetTop + obj1.offsetHeight,
l2 = obj2.offsetLeft,
r2 = obj2.offsetLeft + obj2.offsetWidth,
t2 = obj2.offsetTop,
b2 = obj2.offsetTop + obj2.offsetHeight;

if(r1<l2 || b1<t2 || l1>r2 || t1>b2)return false;
return true;
}

var z=0;
//拖动效果
function drag(obj){
obj.onmousedown=function(ev){
z++;
var oEvent=ev||event;
var oNewSpan=document.createElement('span');
oNewSpan.className='bor';
setAttr(oNewSpan,{left:obj.offsetLeft+'px',top:obj.offsetTop+'px'});

var oPar=this.parentNode;
oPar.appendChild(oNewSpan)

obj.style.zIndex=z;
var disX=oEvent.clientX-this.offsetLeft;
var disY=oEvent.clientY-this.offsetTop;
//记录刚开始的创建的span的坐标；
var posJson={l:obj.offsetLeft,t:obj.offsetTop};

document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

setAttr(obj,{left:l+'px',top:t+'px'});

posJson.l=oNewSpan.offsetLeft;
posJson.t=oNewSpan.offsetTop;
}

}
document.onmouseup=function(){
document.onmousemove=document.onmouseup=null;
oPar.removeChild(oNewSpan)

setAttr(obj,{left:posJson.l+'px',top:posJson.t+'px'});
}
return false;
}
}
}
</script>

</head>

</body>
</html>

来源：https://www.cnblogs.com/theyes/p/3872525.html

标签

border

box