javascript 源到目标元素移动

来源：互联网发布：挺进地牢修改数据编辑：程序博客网时间：2024/05/18 00:27

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function run(srcarray,des) {
  if(!srcarray instanceof Array) srcarray = [srcarray];
  var interval = 10;
  var move_unit = 1;
  var data = {gaps:[],min:0};
  var move_end = false;
  var recover = false;
  var isrecover = true;
  init();

  var id = setInterval(function() {
   for(var index=0;index<srcarray.length;index++) {
    if(!recover) startMove(srcarray[index],des.data,index);
    else startMove(srcarray[index],srcarray[index].data,index);
   }
   document.title = new Date().getTime();
   if(move_end) {
    move_end = false;
    if(recover) clearInterval(id);
    else if(isrecover) recover = true
    else clearInterval(id);
   }
  },interval);

  function init() {
   des.x = parseInt(des.style.width);
   des.y = parseInt(des.style.height);
   des.t = parseInt(des.style.top);
   des.l = parseInt(des.style.left);
   des.data = {x:des.style.width,y:des.style.height,t:des.style.top,l:des.style.left};
   for(var i=0;i<srcarray.length;i++) {
    var src = srcarray[i]
    src.x = parseInt(src.style.width);
    src.y = parseInt(src.style.height);
    src.t = parseInt(src.style.top);
    src.l = parseInt(src.style.left);
    src.data = {x:src.style.width,y:src.style.height,t:src.style.top,l:src.style.left};
    var gap_x = {gap:src.x - des.x,rate:0};
    var gap_y = {gap:src.y - des.y,rate:0};
    var gap_t = {gap:src.t - des.t,rate:0};
    var gao_l = {gap:src.l - des.l,rate:0};
    data.gaps.push(gap_x);
    data.gaps.push(gap_y);
    data.gaps.push(gap_t);
    data.gaps.push(gao_l);

   }

   var min = 1;
   for(var index=0;index<data.gaps.length;index++) {
    if(Math.abs(data.gaps[index].gap) == 0) continue;
    if(min > Math.abs(data.gaps[index].gap)) {
     min = Math.abs(data.gaps[index].gap);
     data.min = index;
    }
   }

   for(var index=0;index<data.gaps.length;index++) {
    if(Math.abs(data.gaps[data.min].gap == 0)) {
     move_end = true;
     return ;
    }
    data.gaps[index].rate = data.gaps[index].gap*move_unit/Math.abs(data.gaps[data.min].gap);
   }
  }

  function startMove(src,desData,index) {
   if(src.style.width != desData.x) {
    if(Math.abs(src.x - parseInt(desData.x)) <= Math.abs(data.gaps[0+index*4].rate)) {
     src.style.width = desData.x;
     if(data.min == 0+index*4) move_end = true;
    }
    else {
     if(!recover) src.x -= data.gaps[0+index*4].rate;
     else src.x +=data.gaps[0+index*4].rate;
     src.style.width = src.x+"px";
    }
   }
   if(src.style.height != desData.y) {
    if(Math.abs(src.y - parseInt(desData.y)) <= Math.abs(data.gaps[1+index*4].rate)) {
     src.style.height = desData.y;
     if(data.min == 1+index*4) move_end = true;
    }
    else {
     if(!recover) src.y -= data.gaps[1+index*4].rate;
     else src.y += data.gaps[1+index*4].rate;
     src.style.height = src.y+"px";
    }
   }
   if(src.style.top != desData.t) {
    if(Math.abs(src.t - parseInt(desData.t)) <= Math.abs(data.gaps[2+index*4].rate)) {
     src.style.top = desData.t;
     if(data.min == 2+index*4) move_end = true;
    }
    else {
     if(!recover) src.t -= data.gaps[2+index*4].rate;
     else src.t += data.gaps[2+index*4].rate;
     src.style.top = src.t+"px";
    }
   }
   if(src.style.left != desData.l) {
    if(Math.abs(src.l - parseInt(desData.l)) <= Math.abs(data.gaps[3+index*4].rate)) {
     src.style.left = desData.l;
     if(data.min == 3+index*4) move_end = true;
    }
    else {
     if(!recover) src.l -= data.gaps[3+index*4].rate;
     else src.l += data.gaps[3+index*4].rate;
     src.style.left = src.l+"px";
    }
   }
  }

}

function onstart() {
  var deso = document.getElementById('des');
  var srco = document.getElementById('src');
  var srco1 = document.getElementById('src1')
  var srco2 = document.getElementById('src2')
  var srco3 = document.getElementById('src3')
  run([
   srco,
   srco1,
   srco2,
   srco3,
   document.getElementById('src4'),
   document.getElementById('src5'),
   document.getElementById('src6'),
   document.getElementById('src7'),
   document.getElementById('src8'),
   document.getElementById('src9'),
   document.getElementById('src10')
   ],deso)
}
</script>
</head>
<body style="width:100%;height:100%;background-color:transparent;overflow:auto;">
  <div id="src" style="width:200px;height:100px;position:absolute;left:10px;top:10px;border:1px solid gray"></div>
  <div id="src1" style="width:160px;height:100px;position:absolute;left:800px;top:10px;border:1px solid gray"></div>
  <div id="src2" style="width:300px;height:100px;position:absolute;left:250px;top:10px;border:1px solid gray"></div>
  <div id="src3" style="width:100px;height:100px;position:absolute;left:630px;top:10px;border:1px solid gray"></div>
  <div id="src4" style="width:200px;height:100px;position:absolute;left:10px;top:500px;border:1px solid gray"></div>
  <div id="src5" style="width:160px;height:100px;position:absolute;left:800px;top:500px;border:1px solid gray"></div>
  <div id="src6" style="width:300px;height:100px;position:absolute;left:250px;top:500px;border:1px solid gray"></div>
  <div id="src7" style="width:100px;height:100px;position:absolute;left:630px;top:500px;border:1px solid gray"></div>
  <div id="src8" style="width:120px;height:100px;position:absolute;left:50px;top:250px;border:1px solid gray"></div>
  <div id="src9" style="width:100px;height:100px;position:absolute;left:830px;top:250px;border:1px solid gray"></div>
  <div id="src10" style="width:400px;height:300px;position:absolute;left:300px;top:150px;border:1px solid gray"></div>
  <div id="des" style="width:40px;height:20px;position:absolute;left:500px;top:300px;border:1px solid gray"></div>
  <button onclick="onstart()" style="position:absolute;left:600px;">click</button>
</body>
</html>