js代碼效果沒實(shí)現(xiàn),求幫助
<!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(){
? ? ? ? //任意兩個盒子的碰撞檢測
? ? ? ? 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;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //檢測盒子是否碰到窗口邊緣
? ? ? ? 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;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //移動盒子
? ? ? ? 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);
? ? ? ? }
? ? }
? ? //碰撞檢測
? ? 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>