如图所示

 

地址

http://nfc.qq.com/?&mz_ca=1000973&mz_sp=3xYDZ0&mz_cr=0&mz_sr=0&mz_sb=1

 

实现后的效果，点击互相交换位置和距离左边和上角的信息。

 

要点一：

var now = s_pic_li[0];

for(var i=0; i<s_pic_li.length; i++){

s_pic_li[i].onclick = function(){

if(this == now) return false;

var w = now.offsetWidth;

var h = now.offsetHeight;

var l = now.offsetLeft;

var t = now.offsetTop;

var w1= this.offsetWidth;

var h1 = this.offsetHeight;

var l1 = this.offsetLeft;

var t1 = this.offsetTop;

startrun(now,{width:w1,height:h1,left:l1,top:t1});

startrun(this,{width:w,height:h,left:l,top:t});

now=this;

}

}

循环给每一块加点击事件，获取交换双方的信息，然后执行运动函数，相关信息做为参数。

 

最后，上代码：

   
           
     
 
      
0 
      
1
 
      
2
 
      
3
 
      
4