<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Nine Gongge Collision </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>
<script>
Window.onload=function () {
var Obox=document.getelementbyid (' box ');
var aspan=obox.getelementsbytagname (' span ');
for (Var i=aspan.length-1;i>=0;i--) {
aspan[i].innerhtml=i+1;
aspan[i].style.background= ' RGB (' +rand (0,255) + ', ' +rand (0,255) + ', ' +rand (0,255) + ') ';
var ls=getpos (Aspan[i]). Left;
var ts=getpos (Aspan[i]). Top;
aspan[i].style.left=ls+ ' px ';
aspan[i].style.top=ts+ ' px ';
aspan[i].style.position= ' absolute ';
Set coordinates why can't we use this function here? Please instruct the cattle.
SetAttr (aspan[i],{left:ls+ ' px ', top:ts+ ' px ', Position: ' absolute '});
Drag (aspan[i]);
}
Generate a random number between n-m
function rand (N,M) {
Return parseint (Math.random () * (m-n+1) +n)
};
Get style
function GetStyle (obj,attr) {
Return getComputedStyle () getComputedStyle (obj,flase) [Attr]:obj.getcurrentstyle (attr)
};
Get coordinates
function GetPos (obj) {
var l=0,t=0;
while (obj) {
L+=obj.offsetleft;
T+=obj.offsettop;
Obj=obj.offsetparent;
}
return {left:l,top:t}
}
Set 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;
Drag effect
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;
Records the coordinates of the created span that was just started;
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 ');
var i=0,len=aspan.length,m=9999999999999999,near;
for (i;i<len;i++) {
if (aspan[i]==obj) continue;
if (Ispeng (aspan[i],obj)) {
var ls=math.abs (aspan[i].offsetleft-obj.offsetleft);
var ts=math.abs (aspan[i].offsettop-obj.offsettop);
var cs=ts*ts+ls*ls;
if (cs<m) {
M=cs;
Near=aspan[i];
}
}
}
if (!near | | near==obj) {
Return
}else{
SetAttr (onewspan,{left:near.offsetleft+ ' px ', top:near.offsettop+ ' px ');
SetAttr (near,{left:posjson.l+ ' px ', top:posjson.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>
<body>
<div id= "box" >
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>