http://www.pptjcw.com

ppt图片滚动循环播放怎么设置:小程序实现循环滚动播放文字

    下面的是PPT教程网给你带来的相关内容:

    ppt图片滚动循环播放怎么设置:小程序实现循环滚动播放文字

    uni-app小程序实现滚动播放文字效果 HTML结构:

    
        
            
                开始testtesttesttesttesttest到底
            
        
    

    ppt图片滚动循环播放怎么设置

    JS:

    data() {
                return {
                    animationObj: {},
                    animation: {}
                }
            },
            methods: {
                loadAnimation() { //初始化动画函数
                    let that = this;
                    let query = wx.createSelectorQuery();   //创建选择器
                    query.select('#box').boundingClientRect(); //获取盒子大小位置等信息的请求(未发送的请求)
                    query.select('#text').boundingClientRect(); //同上
                    query.exec(function(res){   //发送以上请求,返回的是所有请求的结果数组
                        console.log('请求结果',res);
                        let boxWidth = res[0].width;  //获取外盒子的宽度
                        let textWidth = res[1].width;  //获取文字长度
                        if(boxWidth{ //等dom更新完成后再执行,dom渲染的过程是异步的
                        setTimeout(()=>{ //等动画执行完再进行下一次动画
                            that.startAnimation(boxWidth,textWidth,++step);
                        },duration)
                    })
                }
            },
            onLoad(params) {
                this.$nextTick(()=>{
                    this.loadAnimation()
                })
            }

    CSS:

    ppt图片滚动循环播放怎么设置

    #box {
        font-weight: bold;
        font-size: 40upx;
        white-space: nowrap;
        width:200upx;
        height:80upx;
        position: relative;   //设置定位才能生效,父元素相对定位
        overflow: hidden;
        background-color: aquamarine;
    }
    #text {
        color: #000;
        height:80upx;
        display: flex;
        align-items: center;
        position: absolute;  //设置定位才能生效,子元素绝对定位
        line-height: 1em;
    }

    效果图:

    ppt图片滚动循环播放怎么设置

    本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容ppt图片滚动循环播放怎么设置:小程序实现循环滚动播放文字,请及时与我们联系,并提供相关证据ppt图片滚动循环播放怎么设置,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:

    感谢你支持pptjcw.com网,我们将努力持续给你带路更多优秀实用教程!

    提示:如果您觉得本文不错,请点击分享给您的好友!谢谢

    上一篇:ppt怎么插入表格:为什么这个PPT表格,颜值比你还高? 下一篇:ppt设置背景图片:如何制作ppt背景图 如何设置ppt背景

    郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。