js实现文字向上滚动

最新推荐文章于 2024-06-20 11:00:33 发布

八月的猪猪

最新推荐文章于 2024-06-20 11:00:33 发布

阅读量1.2k

点赞数

分类专栏：前端 H5 文章标签： js 向上滚动滚动条

本文链接：https://blog.csdn.net/qq_42894622/article/details/89427426

版权

前端同时被 2 个专栏收录

123 篇文章 3 订阅

订阅专栏

12 篇文章 1 订阅

订阅专栏

个人blog，欢迎关注加收藏

js实现文字向上滚动

html

<div class="content">
     <ul style="list-style:none" id="marquee">
         <li v-for="(item,indx) in congratulationText" :key="indx">{{item}}</li>
     </ul>
 </div>

css

 /* 中部内容 */
    .congratulation>>>.content{
        margin-top: 11%;
        height: 50vh;
        overflow: hidden;
    }
    /* 中部文字 */
    .congratulation>>>.content ul{
        padding: 0;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        color: #786E4D;    

    }
    .congratulation>>>.content ul li{
        line-height: 1.9;
    }

vue组件的js

export default {
  name: 'congratulation',
  data () {
    return {
        congratulationText:[
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',

        ],//祝贺信息列表
        timeout:"",//记录计时器
    }
  },
  methods:{
    //滚动条
    scrollAnimation(){
        let _this = this;
        clearTimeout(_this.timeout);
        var marquee = document.getElementById('marquee');
        var offset=0;
        var scrollheight =marquee.offsetHeight;//整个高度
        var firstNode = marquee.children[0].cloneNode(true);
        marquee.removeChild(marquee.children[0]);//还有这里
        marquee.appendChild(firstNode);//还有这里
        if(offset == scrollheight){
            offset = 0;
        }
        marquee.style.marginTop = "-"+offset+"px";
        offset += 1;
        _this.timeout = setTimeout(_this.scrollAnimation,1000);
    }
  },
  mounted(){
        let _this = this;
        _this.scrollAnimation();//祝贺信息滚动条加载
  }
}