根据拖拽的方向,来处理动画,横向就设置left属性,纵向则设置top属性。
超过一定范围就结束动画,然后将当前移动的卡片转到队列的的第一个位置,再调用reset函数,就会重新设置好卡片的位置。
代码
来几个美女看一下吧,不知合大家口味不?
给个三连吧,哈哈!
前两天在网上看到一个用vue写飞卡片的,觉得很有意思,我就自己想写一个,就花了点时间搞了一下,做的不好望大家多多指教。
两个主要的功能:
1.空白的地方点击最上面开始移动卡片,然后这个卡片会回到最下面,同时其他卡片往上移动。
2.拖动卡片超过多少范围会飞出去(上、下、左、右四种方向)–拖动中间的卡片也可以。
先看看效果:
第一次用视频做图片,做的不好,哈哈!
首先要做一个盒子,然后生成几张卡片放到这个盒子里面
然后用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 ;
}
至于拖拽的我就不多说了,我这个好像也还不是很好,拖拽有时候感觉会有点卡顿,后面再完善吧。