用js仿探探拖拽卡片的效果、飞卡片的效果，感觉挺酷，最后有美女看哦！程序员就是可以为所欲为！

case ‘card3’:

obj.style.background = ‘powderblue’;

break;

case ‘card4’:

obj.style.background = ‘steelblue’;

break;

}

}

}

看一下盒子初始化好的模样，还行，不算太丑，哈哈

根据拖拽的方向，来处理动画，横向就设置left属性，纵向则设置top属性。

//针对上下左右有不同的设置

if(direction==‘left’){

distance -= speed;

dire=‘left’;

if(distance<=1){

endFlag=true;

}

}else if(direction==‘top’){

distance -= speed;

dire=‘top’;

if(distance<=1){

endFlag=true;

}

}else if(direction==‘bottom’){

distance += speed;

dire=‘top’;

if(distance>=90){

endFlag=true;

}

}else{

distance += speed;

dire=‘left’;

//超过一定范围就调整卡片

if(distance>=90){

endFlag=true;

}

}

obj.style[dire]=distance +‘%’;

超过一定范围就结束动画，然后将当前移动的卡片转到队列的的第一个位置，再调用reset函数，就会重新设置好卡片的位置。

if(endFlag){

//清除定时器

clearInterval(obj.timer);

obj.timer=null;

//把当前元素 从盒子队列中移动到最前面

moveFlag=false;

var index = boxStack.findIndex(function(item){

return obj.id==item.id;

})

var cur = boxStack.splice(index,1);

boxStack.unshift(cur[0]);//添加到队列最前面

setTimeout(function(){

reset();//重新部署盒子

},50)//设置重写设置盒子样式的延时，看起来更舒服

return ;

}

至于拖拽的我就不多说了，我这个好像也还不是很好，拖拽有时候感觉会有点卡顿，后面再完善吧。

代码