轮播动画

最新推荐文章于 2022-12-09 16:05:21 发布

zhaohanqq

最新推荐文章于 2022-12-09 16:05:21 发布

阅读量208

点赞数

分类专栏：随笔文章标签：动画 animate 文字抖动

本文链接：https://blog.csdn.net/zhaohanqq/article/details/88595538

版权

随笔专栏收录该内容

11 篇文章 0 订阅

订阅专栏

要特别注意的是margin-top在变化的时候，文字会抖动，请给使用动画的元素加上-webkit-backface-visibility: hidden;

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            * {
                margin: 0;
                padding:0;
            }
            html, body{height:100%;}
    
            
    
            .award {
                width: 100%;
                height: 1.24rem;
                margin-top: 0.15rem;
            }
    
            .award_wrap {
                width: 100%;
                height: 1.24rem;
                overflow: hidden;
                border:0.01rem solid transparent;
                margin-top:60px;
                -webkit-backface-visibility: hidden;
                border:0.01rem solid #000;
            }
    
            .award_box {
                height: 0.26rem;
            }
    
            .award_item {
                height: 0.57rem;
                margin: 0.05rem 0;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                -webkit-backface-visibility: hidden;
            }
    
            .swiper_img {
                width: 0.52rem;
                height: 0.52rem;
                border-radius: 50%;
                z-index: 100;
                -webkit-backface-visibility: hidden;
            }
    
            .state {
                height: 0.56rem;
                line-height: 0.56rem;
                max-width: 6rem;
                font-size: 0.26rem;
                color: #fddad8;
                padding: 0 0.16rem 0 0.68rem;
                margin-left: -0.52rem;
                background: #CF3732;
                border-radius: 0.52rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -webkit-backface-visibility: hidden;
            }
        </style>
</head>
<body>
    <div class="award_wrap">
        <ul style="-webkit-backface-visibility: hidden;">
            <li class="award_item">
                <img class="swiper_img" alt="">
                <p class="state">摇到了&nbsp;&nbsp;打开讲噶离开讲噶看</p>
            </li>
            <li class="award_item">
                <img class="swiper_img" alt="">
                <p class="state">摇到了&nbsp;&nbsp;小椅子</p>
            </li>
            <li class="award_item">
                <img class="swiper_img" alt="">
                <p class="state">摇到了&nbsp;&nbsp;大苹果</p>
            </li>
            <li class="award_item">
                <img class="swiper_img" alt="">
                <p class="state">摇到了&nbsp;&nbsp;红包报噶九零</p>
            </li>
            <li class="award_item">
                <img class="swiper_img" alt="">
                <p class="state">摇到了&nbsp;&nbsp;6898079法律讲噶看</p>
            </li>
            <li class="award_item">
                <img class="swiper_img" alt="">
                <p class="state">摇到了&nbsp;&nbsp;微软瓦房店市</p>
            </li>
            <li class="award_item">
                <img class="swiper_img" alt="">
                <p class="state">摇到了&nbsp;&nbsp;垃圾垃圾</p>
            </li>
            <li class="award_item">
                <img class="swiper_img" alt="">
                <p class="state">摇到了&nbsp;&nbsp;欧提耶呕i也哦</p>
            </li>
            <li class="award_item">
                <img class="swiper_img" alt="">
                <p class="state">摇到了&nbsp;&nbsp;留影；啊讲按军法</p>
            </li>
            <li class="award_item">
                <img class="swiper_img" alt="">
                <p class="state">摇到了&nbsp;&nbsp;vm,n,mxnb,mxbn</p>
            </li>
        </ul>
    </div>
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
            $(document).ready(function () {
                setResize();
                //记得要清除定时器
                setInterval(function () {  // 添加定时器，每1.5s进行转换
                    console.log(111)
                    $(".award_wrap").find("ul:first").animate({
                        marginTop: "-1.20rem",  //每次移动的距离
                    },2500,'linear', function () {   // 动画运动的时间
                        //$(this)指的是ul对象，
                        //ul复位之后把第一个元素和第二个元素插入
                        //到ul的最后一个元素的位置
                        $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
                        $(this).find("li:first").appendTo(this);
                    });
                }, 2500)
            });
            setResize = function () {
                (function () {
                    var resize = function () {
                        var psdW = 750//psd设计图宽度
                        var W = $(window).width();
                        var fs = W / psdW;
                        $("html").css("font-size", (fs * 625) + "%");
                    };
                    resize();
                    $(window).resize(resize);
                })();
            }
        </script>
</body>

即使做了特殊处理，安卓上动画还是抖动，所以换做transform:translateY()

app.vm.$nextTick(function(){
                                //轮播
                                let len = $(".award_wrap").find("li").length;
                                if(len>0){
                                    if(len == 1){
                                        $(".award_wrap ul").append($(".award_wrap li:first").clone());
                                        $(".award_wrap ul").append($(".award_wrap li:first").clone());
                                    }else{
                                        $(".award_wrap ul").append($(".award_wrap li:first").clone());
                                        $(".award_wrap ul").append($(".award_wrap li:first").next().clone());
                                    }
                                    app.vm.carousel(len);
                                }
                         }

carousel(len){
                if(app.vm.timer_l){
                    clearInterval(app.vm.timer_l);
                }
                let t = 0,idx = 0;
                app.vm.timer_l = setInterval(function () {
                    ++idx;
                    if(idx<=len){
                        t += -0.62;
                        $(".award_wrap").find("ul:first").css({
                            transform: "translateY("+t+"rem)",
                            transition: "all 1s linear"
                        });
                    }else{
                        // clearInterval(app.vm.timer_l);
                        // app.vm.carousel(len);
                        t = 0;idx = 0;
                        $(".award_wrap").find("ul:first").css({
                            transform: "translateY("+t+"rem)",
                            transition: "all 0s linear"
                        });
                    }
                }, 1000)
            },

因为加了定时器，如果关闭屏幕再重新开屏进入界面，轮播会快速运动

/*当用户没有浏览当前页面时暂停轮播*/
                            $(document).on('visibilitychange', function(e) {
                                if (e.target.visibilityState === "visible") {
                                    setTimeout(function () {
                                        window.location.reload();
                                    },1000);
                                }
                            });

添加链接描述