<!DOCTYPE html><html><head>? ? <title>float box</title>? ? <style type="text/css">? ? ? ? *{? ? ? ? ? ? margin: 0;? ? ? ? ? ? padding: 0;? ? ? ? }? ? ? ? div{? ? ? ? ? ? width: 100px;? ? ? ? ? ? height: 100px;? ? ? ? ? ? border: 3px solid #acc;? ? ? ? ? ? position: absolute;? ? ? ? ? ? overflow: hidden;? ? ? ? }? ? ? ? #box{top: 0px;}? ? ? ? #box1{top: 150px;}? ? ? ? #box2{top: 300px;}? ? ? ? #box3{top: 450px;}? ? </style></head><body><div id="box"><a href="http://hao.#"><img src="page.jpg"/></a></div><div id="box1"><a href="http://hao.#"><img src="page.jpg"/></a></div><div id="box2"><a href="http://hao.#"><img src="page.jpg"/></a></div><div id="box3"><a href="http://hao.#"><img src="page.jpg"/></a></div><script type="text/javascript">? ? //獲取窗口寬高? ? var width=document.documentElement.clientWidth || document.body.clientWidth;? ? var height=document.documentElement.clientHeight||document.body.clientHeight;? ? var els=document.getElementsByTagName('div');? ? var totop=[],left=[],movetop=[],moveleft=[];? ? for(var i=0;i<els.length;i++){? ? ? ? totop[i]=els[i].offsetTop;? ? ? ? left[i]=els[i].offsetLeft;? ? ? ? movetop[i]=true;? ? ? ? moveleft[i]=true;? ? }? ? function move(){? ? ? ? //任意兩個(gè)盒子的碰撞檢測(cè)? ? ? ? for(var i=0;i<els.length;i++){? ? ? ? ? ? for(var j=0;j<els.length;j++){? ? ? ? ? ? ? ? if(i!=j){? ? ? ? ? ? ? ? ? ? var oCheck=checkbox(els[i],els[j]);? ? ? ? ? ? ? ? ? ? if(oCheck){? ? ? ? ? ? ? ? ? ? ? ? moveleft[i]=moveleft[i]?false:true;? ? ? ? ? ? ? ? ? ? ? ? moveleft[j]=moveleft[j]?false:true;? ? ? ? ? ? ? ? ? ? ? ? movetop[i]=movetop[i]?false:true;? ? ? ? ? ? ? ? ? ? ? ? movetop[j]=movetop[j]?false:true;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? }? ? ? ? //檢測(cè)盒子是否碰到窗口邊緣? ? ? ? for(var i=0;i<els.length;i++) {? ? ? ? ? ? if (left[i] <= 0) {? ? ? ? ? ? ? ? moveleft[i] = true;? ? ? ? ? ? } else if ((left[i] + 106) >= width) {? ? ? ? ? ? ? ? moveleft[i] = false;? ? ? ? ? ? }? ? ? ? ? ? if (totop[i] <= 0) {? ? ? ? ? ? ? ? movetop[i] = true;? ? ? ? ? ? } else if ((totop[i] + 106) >= height) {? ? ? ? ? ? ? ? movetop[i] = false;? ? ? ? ? ? }? ? ? ? }? ? ? ? //移動(dòng)盒子? ? ? ? for(var i=0;i<els.length;i++) {? ? ? ? ? ? if (moveleft[i]) {? ? ? ? ? ? ? ? left[i] += 1;? ? ? ? ? ? } else {? ? ? ? ? ? ? ? left[i] -= 1;? ? ? ? ? ? }? ? ? ? ? ? if (movetop[i]) {? ? ? ? ? ? ? ? totop[i] +=1;? ? ? ? ? ? } else {? ? ? ? ? ? ? ? totop[i] -= 1;? ? ? ? ? ? }? ? ? ? ? ? els[i].style.left = left[i] + 'px';? ? ? ? ? ? els[i].style.top = totop[i] + 'px';? ? ? ? }? ? ? ?if(true){? ? ? ? ? ? setTimeout(move,20);? ? ? ? }? ? }? ? //碰撞檢測(cè)? ? function checkbox(elsi,elsj) {? ? ? ? var a=parseInt(elsi.offsetLeft),b=parseInt( elsj.offsetLeft),c=parseInt(elsi.offsetTop),d=parseInt(elsj.offsetTop);? ? ? ? var leftcheck=Math.abs(a-b);var topcheck=Math.abs(c-d);? ? ? ? if(leftcheck<=106&&topcheck<=106){? ? ? ? ? ? return 1;? ? ? ? }? ? ? ? else{? ? ? ? ? ? return 0;? ? ? ? }? ? }? ? window.onload=move();</script></body></html>
js代碼問(wèn)題，碰撞后盒子沒有反向運(yùn)動(dòng)
菜鳥起飛
2015-03-19 14:04:18