web做一个翻卡片组件

最新推荐文章于 2024-09-23 16:45:30 发布

Darth squared

最新推荐文章于 2024-09-23 16:45:30 发布

阅读量232

点赞数

分类专栏： web 文章标签： css javascript html web app

本文链接：https://blog.csdn.net/weixin_44037337/article/details/110824887

版权

jQuery Mobile 翻卡动画手机组件 CSS动画 JavaScript

关键词由CSDN通过智能技术生成

web 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

开局吐槽

想做一个像王权里的翻卡组件,要能支持手机,翻了翻网上好像只有安卓做的比较多,找了两个web实现的,
一个用不了,另一个代码太长了怕有坑,就自己做了一个
话不多说,上代码和效果

效果

在这里插入图片描述

代码

<head>
    <link rel="stylesheet" href="css/animate.css(百度搜这个css库)" />
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script>
        var animate_done = 1;
        $(document).ready(function () {
            $("#card1").on("swipeleft", function () {
                if (animate_done == 1) {
                    animate_done =0;
                    $("#card1").addClass("animated rotateOutUpLeft back-card");
                    setTimeout(function () {
                        $("#card1").removeClass("animated rotateOutUpLeft front-card");
                    }, 1000);

                    $("#card2").addClass("animated zoomIn front-card");
                    setTimeout(function () {
                        $("#card2").removeClass("animated zoomIn back-card");
                        animate_done = 1;
                    }, 1000);
                }
            });
            $("#card2").on("swipeleft", function () {
                if (animate_done == 1) {
                    animate_done =0;
                    $("#card2").addClass("animated rotateOutUpLeft back-card");
                    setTimeout(function () {
                        $("#card2").removeClass("animated rotateOutUpLeft front-card");
                    }, 1000);

                    $("#card1").addClass("animated zoomIn front-card");
                    setTimeout(function () {
                        $("#card1").removeClass("animated zoomIn back-card");
                        animate_done = 1;
                    }, 1000);
                }
            });
            $("#card1").on("swiperight", function () {
                if (animate_done == 1) {
                    animate_done =0;
                    $("#card1").addClass("animated rotateOutUpRight back-card");
                    setTimeout(function () {
                        $("#card1").removeClass("animated rotateOutUpRight front-card");
                    }, 1000);

                    $("#card2").addClass("animated zoomIn front-card");
                    setTimeout(function () {
                        $("#card2").removeClass("animated zoomIn back-card");
                        animate_done = 1;
                    }, 1000);
                }
            });
            $("#card2").on("swiperight", function () {
                if (animate_done == 1) {
                    animate_done =0;
                    $("#card2").addClass("animated rotateOutUpRight back-card");
                    setTimeout(function () {
                        $("#card2").removeClass("animated rotateOutUpRight front-card");
                    }, 1000);

                    $("#card1").addClass("animated zoomIn front-card");
                    setTimeout(function () {
                        $("#card1").removeClass("animated zoomIn back-card");
                        animate_done = 1;
                    }, 1000);
                }
            });
        });
    </script>
    <style>
        .card {
            border-radius: 30px;
            position: absolute;
            top: 20%;
            left: 30%;
            z-index: 99;
        }

        .front-card {
            float: left;
            overflow: hidden;
            z-index: 20;
            height: 400px;
            width: 300px;
            background: white;
            border: 6px solid rgb(255, 96, 96);
        }

        .back-card {
            z-index: 10;
            overflow: hidden;
            height: 400px;
            width: 300px;
            background: white;
            border: 6px solid rgb(255, 96, 96);
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="front-card card" id="card1">
            hello there!
        </div>
        <div class="back-card card" id="card2">
            gen--eral kenobi!
        </div>
    </div>
</body>