wap简单的卡片层叠布局 滑动

 今天闲来无事看到了一篇文章  五行代码实现 炫动滑动 卡片层叠布局,仿探探、人人影视订阅界面 简单&优雅:LayoutManager+ItemTouchHelper

感觉挺好玩的..

点进去之前我以为是web实现的呢  然而并不是   阿西吧 

后面想了想   可以用web实现吗 感觉应该可以  说干就干

先贴code吧

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="/content/js/jquery-1.8.2.min.js"></script>
    <script src="/content/js/jquery.touchSwipe.min.js"></script>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1.0, user-scalable=no" name="viewport" />
    <title>左右滑动测试</title>
    <style>
        html, body { margin: 0; padding: 0; }
        header { background-color: #000000; color: #fff; padding: 0; margin: 0; line-height: 40px; text-align: center; font-size: 20px; }
        span, p { margin: 0; padding: 0; }
        img { margin: 0; padding: 0; }
        .layou { width: 70%; height: 300px; position: relative; margin: 10px auto; }
        .layou-list { position: absolute; width: 100%; height: 100%; overflow: hidden; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.40); padding: 10px 5% 0 5%; background-color:#000;}
        .layou-list-img { width: 100%; height: 90%; }
        .layou-list-bottom { text-align: right; position: absolute; width: 100%; left: 0; bottom: 0; background-color: #000000; color: #fff; height: 10%; line-height: 30px; border-bottom: 1px solid #7e7e7e; }
    </style>
    <!---webkit-transform: skewX(2deg);-->
</head>
<body ontouchmove="event.preventDefault()">
    <header>
        <p>layouDemo</p>
    </header>
    <div class="layou">
        <div class="layou-list">
            <img class="layou-list-img" src="/content/images/icons/sl1.png" />
            <div class="layou-list-bottom"></div>
        </div>
        <div class="layou-list">
            <img class="layou-list-img" src="/content/images/icons/sl2.png" />
            <div class="layou-list-bottom"></div>
        </div>
        <div class="layou-list">
            <img class="layou-list-img" src="/content/images/icons/sl3.png" />
            <div class="layou-list-bottom"></div>
        </div>
        <div class="layou-list">
            <img class="layou-list-img" src="/content/images/icons/sl4.png" />
            <div class="layou-list-bottom"></div>
        </div>
        <div class="layou-list">
            <img class="layou-list-img" src="/content/images/icons/sl5.png" />
            <div class="layou-list-bottom"></div>
        </div>
        <div class="layou-list">
            <img class="layou-list-img" src="/content/images/icons/sl6.png" />
            <div class="layou-list-bottom"></div>
        </div>
    </div>

    <script>
        $(function () {
            var layouNum = $(".layou-list").length;
            var load = function () {
                $(".layou-list").each(function (i, e) {
                    $(e).css({ "z-index": layouNum - i, "transition-duration": "0.7s", "transform": " translate(0px, " + i * 7 + "px)", "width": "" + (90 - 4 * i) + "%", "-webkit-transition": "width .7s;", "left": 2 * i + "%" });
                });
            }
            $(".layou-list").each(function (i, e) {
                $(e).data("index", i);
                $(e).css({ "z-index": layouNum - i, "transition-duration": "0.7s", "transform": " translate(0px, " + i * 7 + "px)", "width": "" + (90 - 4 * i) + "%", "-webkit-transition": "width .7s;", "left": 2 * i + "%" });
                $(e).find(".layou-list-bottom").text((i + 1) + "/" + layouNum);
            });
            var isSwipe = false;//是否正在动画的控制
            $(".layou").swipe({//自己看jquery.touchSwipe.min.js api
                swipeLeft: function (event, phase, direction, distance, duration, fingerCount) {//往左边滑动的事件
                    //console.log("你用" + fingerCount + "个手指以" + duration + "秒的速度向" + direction + "滑动了" + distance + "像素 " + "你在" + phase + "中");
                    if (isSwipe) {
                        return !1;
                    }
                    isSwipe = true;
                    $(".layou-list:eq(0)")[0].style.webkitTransform = "translate(" + -3 * distance + "px,-50px) translateZ(0)";
                    setTimeout(function () {
                        $(".layou").append($(".layou-list:eq(0)").attr("style", "").clone());
                        $(".layou-list:eq(0)").remove();
                        load();
                        isSwipe = false;
                    }, 500);
                },
                swipeRight: function (event, direction, distance, duration, fingerCount) {//往右滑动的事件
                    if (isSwipe) {
                        return !1;
                    }
                    isSwipe = true;
                    $(".layou-list:eq(0)")[0].style.webkitTransform = "translate(" + 3 * distance + "px,-100px) translateZ(0)";//滑走的动画
                    setTimeout(function () {
                        $(".layou").append($(".layou-list:eq(0)").attr("style", "").clone());//移除动画,克隆元素,追加
                        $(".layou-list:eq(0)").remove();//移除元素
                        load();//重新加载
                        isSwipe = false;
                    }, 500);
                }
            });
        });
    </script>
</body>
</html>



花了个把小时实现了一下..(我不会跟你说我真的是现学现卖的....)代码应该比较简单..思路也简单  主要是滑动事件   动画实现

 

 

 

还有没有实现的功能:就是滑动一部分  图片滑动一部分 放手之后图片返回原位, 做了一下 没弄出来 =_=....  应该是判断滑动像素大于多少多少 然后滑动动画 然后复位

 

还有个问题就是页面进来  那些图片会抖一两下.. 可以用个load层掩盖一下当layou-list 加载之后将load去掉就行了.懒的写了

手机可以通过这个地址扫码访问 查看效果...

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值