Rumah >hujung hadapan web >tutorial js >如何实现卡片翻阅效果

如何实现卡片翻阅效果

一个新手asal: 2017-10-20 10:44:591894semak imbas

效果如下：拖动翻阅卡片，或点击‘下一张’翻阅卡片效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=640, user-scalable=0">
    <title>Document</title>
    <style>
        .containt{position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden;}
        ul,li{margin:0; padding:0;}
        ul{position:absolute; left:100px; right:100px; top:150px; bottom:200px;}
        ul>li{list-style:none; display:none; position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 15px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.1); background:#f6f6f6; transition:.3s; -webkit-transition:.3s; cursor:pointer;}
        ul>li img{width:100%;}
        ul>li:nth-child(1){display: block; z-index:2;}
        ul>li:nth-child(2){display: block; transform:matrix(0.95,0,0,1,0,-20); -webkit-transform:matrix(0.95,0,0,1,0,-20); z-index: 1;}
        ul>li:nth-child(3){display: block; transform:matrix(0.9,0,0,1,0,-40); -webkit-transform:matrix(0.9,0,0,1,0,-40); z-index: 0;}
        ul>li>.content{height:100%; width: 100%;}
        ul>li:nth-child(2)>.content{opacity:0.9;}
        ul>li:nth-child(3)>.content{opacity:0.8;}
        .footer{position: absolute; display:flex; display:-webkit-flex; bottom:0; left:0; right:0; height:150px; -webkit-align-items:center; -webkit-justify-content:center; text-align: center;}
        .footer .button{width:80px; height:80px; line-height: 80px; background:#000; border-radius: 50%; color:#fff;}
    </style>
</head>
<body>
    <p>
        <ul>
            <li>
                <p background-image="">
                    <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M000002J4UUk29y8BY.jpg">
                </p>
            </li>
            <li>
                <p>
                    <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.jpg">
                </p>
            </li>
            <li>
                <p>
                    <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M000004AlfUb0cVkN1.jpg">
                </p>
            </li>
            <li>
                <p>
                    <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M000003Nz2So3XXYek.jpg">
                </p>
            </li>
            <li>
                <p>
                    <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M000001BLpXF2DyJe2.jpg">
                </p>
            </li>
            <li>
                <p background-image="">
                    <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M000002J4UUk29y8BY.jpg">
                </p>
            </li>
        </ul>
        <p>
            <p>下一张</p>
        </p>
    </p>    
    <script src="../js/jquery-3.2.0.min.js"></script>
    <script>
    window.onload = function(){
        var pos = {};
        var distance_pos = {};
        var transition;
        var touchStart = function(e){
            var event = e ? e : window.event;
            var touch = event.touches[0];
            var target = event.target || event.srcElement;
            transition = target.style.transition;
            pos = {
                x: touch.pageX,
                y: touch.pageY
            }
            this.addEventListener(&#39;touchmove&#39;, touchMove, false);
            this.addEventListener(&#39;touchend&#39;, touchEnd, false);
        }
        var touchMove = function(e){
            var event = e ? e : window.event;
            var touch = event.touches[0];
            if($("li").length<2){
                alert("已经是最后一张了");
                this.removeEventListener(&#39;touchstart&#39;, touchStart, false);
                this.removeEventListener(&#39;touchmove&#39;, touchMove, false);
                this.removeEventListener(&#39;touchend&#39;, touchEnd, false);
                return false;
            }
            distance_pos = {
                x: touch.pageX - pos.x,
                y: touch.pageY - pos.y
            }
            this.style.transition = &#39;none&#39;;
            this.style.webkitTransition = &#39;none&#39;;
            this.style.left = `${distance_pos.x}px`;
            this.style.top = `${distance_pos.y}px`;
        }
        var touchEnd = function(e){
            var event = e ? e : window.event;
            this.style.transition = transition;
            this.style.webkitTransition = transition;
            if(Math.abs(distance_pos.x) > Math.abs(distance_pos.y)){
                //水平滑动
                if(distance_pos.x < -50){
                    // 向左滑出
                    this.style.left = &#39;-640px&#39;;
                    removeTouchEvent(this)
                }else if (distance_pos.x > 50) {
                    // 向右滑出
                    this.style.left = &#39;640px&#39;;
                    removeTouchEvent(this)
                }else{
                    this.style.top = &#39;0px&#39;;
                    this.style.left = &#39;0px&#39;;
                }
            }else{
                //垂直滑动
                if(distance_pos.y < -50){
                    // 向上滑出
                    this.style.top = &#39;-150%&#39;;
                    removeTouchEvent(this)
                }else if (distance_pos.y > 50) {
                    // 向下滑出
                    this.style.top = &#39;150%&#39;;
                    removeTouchEvent(this)
                }else{
                    this.style.top = &#39;0px&#39;;
                    this.style.left = &#39;0px&#39;;
                }
            }
            this.removeEventListener(&#39;touchmove&#39;, touchMove, false);
            this.removeEventListener(&#39;touchend&#39;, touchEnd, false);
        }
        var listenTouchEvent = function(){
            $("li")[0].addEventListener(&#39;touchstart&#39;,touchStart,false)
        }
        var removeTouchEvent = function(el){
             setTimeout(function(){
                $(el).remove();
                listenTouchEvent()
            },300)
        }
        listenTouchEvent()
        $(".button").click(function(){
            var element = $("li")[0];
            if($("li").length<2){
                return;
            }
            element.style.transform = &#39;translate(640px,0px)&#39;;
            removeTouchEvent(element);
        })
    }
    </script>
</body>
</html>

Atas ialah kandungan terperinci 如何实现卡片翻阅效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：关于vueElement-ui input 搜索与修改的方法Artikel seterusnya：JS中常见的Bom对象

Artikel berkaitan

Lihat lagi