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

根据拖拽的方向,来处理动画,横向就设置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 ;

}

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

代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值