登录

做有态度的前端团队

网易FEG前端团队

一个简单的卡片效果

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

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

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

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

动画的考虑

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

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

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


    //通用
    .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..

    .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实现：


    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滤镜总结

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