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

然后用js给卡片设置样式，有几个要注意的地方

1.从下往上每个卡片的宽度加了12px，高度不动；

2.margin-top和margin-left每个增加了6px；

3.每个单独设置了颜色，为了好看；

4.封装了reset函数，初始的时候调用，当移动动画完成后，再次调用，可以重新排列好盒子（只需要把队列中卡片的顺序调换既即可）。

//重新设置卡片的样式

function reset(){

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

//对每一张卡片设置样式，每张稍微有点不一样

var obj = boxStack[i];

obj.style.left=left+‘px’;

obj.style.top=top+‘px’;

obj.style.marginLeft=marginLeft-i*6+‘px’;

obj.style.marginTop=marginTop-i*6+‘px’;

obj.style.zIndex=zIndex+i;

obj.style.width=(width+i*12)+‘px’;

obj.style.height=height+‘px’;

//每个卡片设置不同的颜色

switch (obj.id) {

case ‘card1’:

obj.style.background = ‘aliceblue’;

break;

case ‘card2’:

obj.style.background = ‘skyblue’;

break;

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 ;

}

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

代码