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

最新推荐文章于 2024-06-12 17:08:13 发布

请叫我官人

最新推荐文章于 2024-06-12 17:08:13 发布

阅读量1.4k

点赞数 1

分类专栏：前端遇到的一些问题

本文链接：https://blog.csdn.net/u010067685/article/details/53786307

版权

前端遇到的一些问题专栏收录该内容

18 篇文章 0 订阅

订阅专栏

今天闲来无事看到了一篇文章五行代码实现炫动滑动卡片层叠布局，仿探探、人人影视订阅界面简单&优雅：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去掉就行了.懒的写了

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