如何实现卡片翻阅效果-js教程-PHP中文网

首页

web前端

js教程

如何实现卡片翻阅效果

一个新手

Oct 20, 2017 am 10:44 AM

卡片效果

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

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

以上是如何实现卡片翻阅效果的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript是用C编写的吗？检查证据Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。