JS制作微场景

原创已于 2023-05-17 12:42:32 修改 · 107 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端 #css

于 2023-05-17 12:01:39 首次发布

使用JS的swiper和animate实现微场景-西藏

从swiper官网引入轮播和动画的css文件:

引入轮播和动画的JS文件：

HTML代码：

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="bg">
                    <img src="https://asset.eqh5.com/FiamG1wlusBAi8iAXaLv_-aH7Khd?imageMogr2/auto-orient/thumbnail/585x879%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="bg1">
                    <img src="https://asset.eqh5.com/Flh2qgQSqYqob2cMnTfIt4k2hHsP?imageMogr2/auto-orient/thumbnail/585x600%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani bg2" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/FpZIOg7Gh56BtYbEOPLMgF_z0xJM?imageMogr2/auto-orient/thumbnail/506x179%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani bg3" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.2s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/FiQ3r2cbOnb_YuLOmkiG_0lXOQzu?imageMogr2/auto-orient/thumbnail/508x189%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani bg4" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/FkiOIGDcPT6WAeSsnFuVquuaKTKs?imageMogr2/auto-orient/thumbnail/504x191%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani tree1 tree" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/FsphbXZ82-4RTkXEByoE2Y0sS5TE?imageMogr2/auto-orient/thumbnail/135x140%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani tree2 tree" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/Fhga7CPDK0TmNxMXPTjxQqTFOneW?imageMogr2/auto-orient/thumbnail/138x145%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani title" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/Fjq7EETMzQ-1ZZsnjbHrV1xGfl1G?imageMogr2/auto-orient/thumbnail/239x354%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani ta" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/FnZu2NhCFm1JMv50hnfw8f8rkYau?imageMogr2/auto-orient/thumbnail/88x113%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani ball" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/FutjCMD475lnSEhvm0w8bhkj2Ag6?imageMogr2/auto-orient/thumbnail/114x55%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani line" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/FoyzjqdjZBUFDoC-LlO9sMkO2yfd?imageMogr2/auto-orient/thumbnail/129x28%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani line2" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/FoyzjqdjZBUFDoC-LlO9sMkO2yfd?imageMogr2/auto-orient/thumbnail/129x28%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani cloud" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/FpNe6cRCXhYcioaZb6LAKtVn4yaw?imageMogr2/auto-orient/thumbnail/90x45%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="ani intro" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s"
                    swiper-animate-delay="0.3s">
                    <span>旅行社西藏/拉萨/布达拉宫旅行</span>
                </div>
                <div class="ani price" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s"
                    swiper-animate-delay="0.3s">
                    <span>现在报名即可立减500元</span>
                </div>
                <div class="ani cloud2" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s"
                    swiper-animate-delay="0.3s">
                    <img src="https://asset.eqh5.com/FsJUHvGpnUU-oTae50vgDiYy9B_b?imageMogr2/auto-orient/thumbnail/316x195%3E/quality/75/format/webp"
                        alt="">
                </div>
                <div class="music">
                    <img src="https://lib.eqh5.com/h5_view_2/images/bgmBtn-07b2cc.svg" alt="">
                    <audio loop="" src="https://asset.eqh5.com/store/3507fdbbcd190eaeebe63e010f8f84e7.mp3" autoplay=""
                        preload=""></audio>
                </div>
            </div>
    </div>
</div>

        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #f3f3f3;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            position: relative;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            /* 这些属性用于水平对齐子元素 -webkit-box-pack 用于Safari浏览器，-ms-flex-pack 用于IE浏览器，-webkit-justify-content 用于Chrome和Safari浏览器，justify-content 用于其他浏览器。 */
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            /* 这些属性用于垂直对齐子元素。与水平对齐相似，也需要针对不同浏览器加上前缀。 */
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide div {
            position: absolute;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
        }

        .bg {
            top: 0;
            width: 100%;
        }

        .bg1 {
            height: 76%;
            width: 100%;
            top: 0;
        }

        .bg2 {
            bottom: 0;
            width: 100%;
            height: 24%;
            z-index: 4;
        }

        .bg3 {
            bottom: 0;
            width: 100%;
            height: 24%;
            z-index: 5;
        }



        .bg4 {
            width: 100%;
            height: 23%;
            bottom: 10%;
        }

        .tree {
            height: 17% !important;
            width: 24% !important;

        }

        .tree1 {
            top: 0;
            left: 0;
            /* height: 18.5%; */
            width: 17%;
            height: 13%;
            z-index: 9;
        }

        .tree2 {
            top: 0;
            right: 0;
            width: 17%;
            height: 15%;
            z-index: 9;
        }

        .title {
            width: 40%;
            height: 45%;
            top: 4%;
        }

        .ta {
            top: 40%;
            left: 26%;
        }

        .line {
            top: 52%;
            left: 4%;
            width: 25%;
        }

        .ball {
            top: 49%;
            right: 9%;
        }

        .line2 {
            top: 7%;
            left: 49%;
            width: 25%;
        }

        .cloud {
            top: 35%;
            right: 4%;
        }

        .intro {
            top: 58%;
            font-size: 20px;
            color: #fff;
            background-color: #000;
            border-radius: 20px;
            padding: 5px 20px;
        }

        .price {
            top: 64%;
        }

        .cloud2 {
            top: 56%;
            right: 0;
            width: 52%;
        }

        .music {
            top: 3%;
            right: 5%;
            width: 2.5rem;
            height: 2.5rem;
            z-index: 99;
        }


        .border {
            top: 5%;
            width: 92%;
        }

        .border-line {
            top: 7%;
            width: 84%;
            height: 78%;
            border: 1px solid #000;
        }

        .recommed {
            top: 9%;
            width: 35%;
            font-size: 22px;
            padding: 4px 30px;
            color: #fff;
            border-radius: 22px;
            background-color: #000;

        }

        .contents {
            top: 13%;
            width: 73%;
            padding: 10px;
        }

        .conimg {
            width: 68%;
            top: 52%;
        }

        .conimg img {
            border: 1px solid #000;

        }

        .cline {
            border-left: 1px solid #000;
            top: 16%;
            height: 57%;
        }

        .day1 {
            top: 18%;
            left: 15%;
            font-size: 0.8rem;
        }

        .day2 {
            top: 25%;
            left: 55%;
            font-size: 0.8rem;
        }

        .day3 {
            top: 32%;
            left: 15%;
            font-size: 0.8rem;
        }

        .day4 {
            top: 40%;
            left: 55%;
            font-size: 0.8rem;
        }

        .day5 {
            top: 48%;
            left: 15%;
            font-size: 0.8rem;
        }

        .day6 {
            top: 56%;
            left: 55%;
            font-size: 0.8rem;
        }

        .day7 {
            top: 64%;
            left: 15%;
            font-size: 0.8rem;
        }

        .day8 {
            top: 70%;
            left: 55%;
            font-size: 0.8rem;
        }

        .img1 {
            top: 17%;
            left: 15%;
            width: 35%;
            height: 20%;
        }

        .img2 {
            top: 17%;
            left: 55%;
            width: 35%;
            height: 20%;
        }

        .img3 {
            top: 45%;
            left: 15%;
            width: 35%;
            height: 20%;
        }

        .img4 {
            top: 45%;
            left: 55%;
            width: 35%;
            height: 20%;
        }

        .dog {
            top: 16%;
            width: 70%;
        }

        .dog img,
        .tt img {
            border: 1px solid #000;
        }

        .pig {
            top: 36%;
            z-index: 55;
            background-color: #000;
            width: 70%;
            color: #fff;
            font-size: 1.2rem;
        }

        .cat {
            top: 41%;
        }

        .tt {
            top: 45%;
            width: 70%;
        }

        .feng {
            top: 72%;
        }

        .hua {
            top: 68%;
            z-index: 99;
            background-color: #000;
            width: 70%;
            color: #fff;
            font-size: 1.2rem;

        }

<script src="js/swiper.min.js"></script>
    <script src="js/animate.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            direction: 'vertical',
            onInit: function (swiper) { //Swiper2.x的初始化是onFirstInit
                swiperAnimateCache(swiper); //隐藏动画元素 
                swiperAnimate(swiper); //初始化完成开始动画
            },
            onSlideChangeEnd: function (swiper) {
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            }
        })
        var music = document.querySelector(".music")
        var i = 1;
        var bol = true;
        var play = setInterval(function () {
            if (bol == true) {
                music.style = "transform: rotate(" + i + "deg)";
                i++;
            }
        }, 10)
        music.onclick = () => {
            bol = !bol;
            if (bol == false) {
                clearInterval(play)
            }
            else {
                setInterval(function () {
                    if (bol == true) {
                        music.style = "transform: rotate(" + i + "deg)";
                        i++;
                    }
                }, 5)
            }
        }

    </script>