然后用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 ;
}
至于拖拽的我就不多说了,我这个好像也还不是很好,拖拽有时候感觉会有点卡顿,后面再完善吧。