Home > Article > Web Front-end > How to achieve card flipping effect

How to achieve card flipping effect

一个新手Original: 2017-10-20 10:44:591864browse

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

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

The above is the detailed content of How to achieve card flipping effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：About vueElement-ui input search and modification methodsNext article：About vueElement-ui input search and modification methods

See more

How to achieve card flipping effect

Related articles