js实现div移动

之后想做一个可以展示数据存储位置变化的示意图，前期先做简单的两列互换。

首先先把格子画出来，因为想做列的移动，所以一列是一个div。
HTML：

   <div class="box">
       <div id="box1">
           <div class="in" style="background: #FE4365">1</div>
           <div class="in" style="background: #FE4365">4</div>
           <div class="in" style="background: #FE4365">7</div>
           <div class="in" style="background: #FE4365">10</div>
           <div class="in" style="background: #FE4365">13</div>
       </div>

       <div id="box2">
           <div class="in" style="background: #FC9D9A">2</div>
           <div class="in" style="background: #FC9D9A">5</div>
           <div class="in" style="background: #FC9D9A">8</div>
           <div class="in" style="background: #FC9D9A">11</div>
           <div class="in" style="background: #FC9D9A">14</div>
       </div>

       <div id="box3">
           <div class="in" style="background: #F9CDAD">3</div>
           <div class="in" style="background: #F9CDAD">6</div>
           <div class="in" style="background: #F9CDAD">9</div>
           <div class="in" style="background: #F9CDAD">12</div>
           <div class="in" style="background: #F9CDAD">15</div>
       </div>
   </div>

注意前后左右的距离。
CSS：

.box{
    width: 350px;
    margin: 0 auto;
    position: relative;
}

#box1{
    float: left;
    width: 52px;
    margin: 0 auto;
    border: 1px solid black;
    position:absolute;
    left: 30px;
    top: 20px;
}

#box2{
    float: left;
    width: 52px;
    margin: 0 auto;
    border: 1px solid black;
    position:absolute;
    left: 82px;
    top: 20px;
}

#box3{
    float: left;
    width: 52px;
    margin: 0 auto;
    border: 1px solid black;
    position:absolute;
    left: 134px;
    top: 20px;
}

.in{
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid black;
}

如图

把第一列和第三列互换，区别只是一个向右移动一个向左移动，下面只放向左移动的js。
JavaScript：

var cycle = null;
function movetoleft(object,itarget){
     var obj=document.getElementById(object);
     clearInterval(cycle);
     cycle=setInterval(function(){
         var speed = 0;
         console.log(\'obj.offsetLeft :\'+obj.offsetLeft);
         if(obj.offsetLeft<itarget){
             speed = 4;
         }
         else{
             speed = -4;
         }

         console.log(\'speed :\'+speed);
         if(obj.offsetLeft <= itarget){
             clearInterval(cycle);
         }
         else{
             obj.style.left = obj.offsetLeft+speed+\'px\';
             console.log(\'obj.style.left :\'+ obj.style.left);
             console.log(\'obj.offsetLeft :\'+ obj.offsetLeft);
         }
     },50);
 }

js解析：

cycle = setInterval(code,interval);//每interval毫秒就执行一次code程序。
clearInterval(cycle);//停止执行

obj.style.left //可读可写 代码中就是通过给它赋值达到另div移动的效果
obj.offsetLeft //只可读 

最后，使用movetoleft(‘box3’,30)调用函数就可以实现移动了。