So erzielen Sie den Effekt des Kartenumdrehens-js-Tutorial-php.cn

So erzielen Sie den Effekt des Kartenumdrehens

一个新手

Freigeben： 2017-10-20 10:44:59

Original

1905 Leute haben es durchsucht

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

Nach dem Login kopieren

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Effekt des Kartenumdrehens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!