之后想做一个可以展示数据存储位置变化的示意图，前期先做简单的两列互换。
首先先把格子画出来，因为想做列的移动，所以一列是一个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)调用函数就可以实现移动了。
