h5页面的切换效果

页面切换效果

可用于主体切换, 开门效果等

效果如下
效果图

代码如下


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            width: 100vw;
            height: 100vh;
            padding-left: 200px;
            position: relative
        }
        .stick {
            position: absolute;
            top: 0px;
            right: 150px;
            width: 3px;
            height: 210px;
            background-color: #eee;
        }
        .boom {
            position: absolute;
            top: 200px;
            right: 131px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: #eee;
            cursor: pointer;
        }
        #btn {
            margin-top: 10px;
        }
        #text {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            border: 1px dashed #ebebeb;
            position: relative;
        }
        .t1 {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 50%;
            height: 100%;
            border: 1px solid #ebebeb;
            transition: all 1s;
            text-align: right;
            line-height: 200px;
        }
        .open {
            transform: rotateY(120deg);
            transform-origin: left;
            transition: all 1s;
        }
        .t2 {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 50%;
            height: 100%;
            border: 1px solid #ebebeb;
            transition: all 1s;
            text-align: left;
            line-height: 200px;
        }
        .open2 {
            transform: rotateY(120deg);
            transform-origin: right;
            transition: all 1s;
        }
    </style>
</head>

<body>
    <div class="stick"></div>
    <div class="boom">open</div>
    <!-- <button id="btn">点击测试效果</button> -->
    <div id="text">
        <div class="t1">开门</div>
        <div class="t2">大发</div>
    </div>
    <script src="../dependence/jquery.js"></script>
    <script>
        $("#btn").click(function(e) {
            e.stopPropagation()

            $('#text').animate({
                "margin-left": 200,
                "opacity": 0
            },
                1500,
                function () {
                    // $('#text').remove();
                });
        })

        $('.boom').click(function(e) {
            e.stopPropagation()
            $('.boom').animate({
                "top": 210,
                },
                400,
                function () {
                    let str = $('.boom').text()
                    str === 'open' ? $('.t1').addClass('open') : $('.t1').removeClass('open')
                    str === 'open' ? $('.t2').addClass('open2') : $('.t2').removeClass('open2')
                    $('.boom').text(str === 'open' ? 'close' : 'open')
                    $('.boom').animate({
                        "top": 200,
                    },
                    400)
                }
            );
            

        })



        var a_idx = 0;
        $("body").click(function (e) {
            var a = new Array("❤感谢观看❤", "❤", "❤喜欢就点个赞呗❤", "❤❤", "❤快去点赞❤", "❤❤❤", "❤不是点这里哦❤", "❤❤", "❤点赞在底部啦❤", "❤", "❤❤");
            var $i = $("<span></span>").text(a[a_idx]); // 依次出现11个
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
                1500,
                function () {
                    $i.remove();
                });
        });
    </script>
</body>

</html>