登录

做有态度的前端团队

网易FEG前端团队

一个简单的卡片效果

吱吱桑 作者: 日期: 2016-08-30
150111

具体效果点这里：http://xyq.test.nie.163.com/test/pics/index.html

一个简单的卡片切换效果，主要有以下功能

  1. 有4个切换的方向
  2. 动态加载数据
  3. CSS3控制动画效果

动画的考虑

一开始是打算通过js动态地计算每个卡片的切换坐标以及动画移动的距离，无奈其计算量的复杂和繁琐，最终放弃了这一方案。

细细观察，你会发现其实每个卡片的位移以及切换出去的效果是一样的，所以完全可以固定写好每个卡片的初始样式，然后再通过js去动态地改变样式名。

所以，很愉快地就这样开始了样式的编写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//通用
.poker-item {
    position: absolute;
    top:0;
    left: 0;
 
    .transition(all .3s ease-in);
}
 
//各卡片
.poker-item-06{
    .transform(translate3d(0, 0, -20rem) rotateX(21deg) rotateY(0deg));   
    z-index: 3;
}
.poker-item-05{
    .transform(translate3d(0, 0, -12.5rem) rotateX(20deg) rotateY(0deg));
    z-index: 4;
}
.poker-item-04{
    .transform(translate3d(0, .6rem, -10.5rem) rotateX(19deg) rotateY(0deg));
    z-index: 5;
}
.poker-item-03{
   .transform(translate3d(0, 1.2rem, -8.5rem) rotateX(18deg) rotateY(0deg)); 
    z-index: 6;
}
.poker-item-02{
    .transform(translate3d(0, 2.0rem, -6.5rem) rotateX(17deg) rotateY(0deg));
    z-index: 7;
}
.poker-item-01{
    .transform(translate3d(0, 2.7rem, -5.05rem) rotateX(16deg) rotateY(0deg));
    z-index: 8;
}

4个方向的切换

预先写好四个方向隐藏的卡片，通过判断用户的操作方向加上对应的left, right, top, bottom..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.poker-item-00-up{
    .transform( translate3d(0, -20rem, -4rem));
    z-index: 8;
}
.poker-item-00-right{
    .transform( translate3d(20rem, 0, -4rem));
    z-index: 8;
}
.poker-item-00-down{
    .transform( translate3d(0, 20rem, -4rem));
    z-index: 8;
}
.poker-item-00-left{
    .transform( translate3d(-20rem, 0, -4rem));
    z-index: 8;
}

js实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
s.container[0].addEventListener("touchstart",function(e){
 
    var touch = e.touches[0]; //获取第一个触点
            start_Y = Number(touch.pageY); //页面触点X坐标
            start_X = Number(touch.pageX);
 
    isTouch = true;
},false);
 
s.container[0].addEventListener("touchmove",function(e){
 
    if(!isTouch)return true;
 
    var touch = e.touches[0];
            end_Y = Number(touch.pageY);
            end_X = Number(touch.pageX);
 
            e.preventDefault();
            return false;
},false);
 
s.container[0].addEventListener("touchend",function(e){
 
    var action;
 
    isTouch = false;
 
    if(!start_Y || !end_Y || !start_X || !end_X) return true;
 
    if(Math.abs(end_Y - start_Y) > Math.abs(end_X - start_X)){
        action =  (end_Y <= start_Y ? "up" : "down");
    }else{
        action =  (end_X <= start_X ? "left" : "right");
    }
     
    if(action){
        callback && callback(action);
    }
 
    start_X = 0;
    start_Y = 0;
    end_X = 0;
    end_Y = 0;
},false);

最后是动态加载数据

结合六马的列表分页功能，动态去取每一页的数据，然后再塞到隐藏的卡片里，等切换下一张卡片就显示出来。如果发现有下一个分页的，就继续请求分页数据。

这样，就简单地实现了这样一个卡片效果啦。

image_20160830211943.png

手机阅读请扫描下方二维码：

none
上一篇：chrome工具优化的学习小结   下一篇：css3滤镜总结
分享到:

    © 2025 FEG-做最好的前端_网易游戏网站服务部前端团队_有态度的互联网前端团队. 由 NetEase 倾情推出.