vue 实现滚动字幕

木子楠

于 2021-07-08 10:00:28 发布

571

分类专栏： vue 文章标签：字幕滚动效果

本文链接：https://blog.csdn.net/beautifultian/article/details/118567274

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<div id="demo" ref="demo" class="out">
  <div class="qimo">
    <div id="demo1" ref="demo1">
      <ul>
        <li v-for="(item, index) in list">
          <a href="">{{item}}</a>
        </li>
      </ul>
    </div>
    <div id="demo2" ref="demo2"></div>
  </div>
</div>

move(){
  let demo = this.$refs.demo
  let demo1 = this.$refs.demo1
  let demo2 = this.$refs.demo2
  demo2.innerHTML = demo1.innerHTML
  setInterval(function(){
    if (demo.scrollLeft - demo2.offsetWidth >=0) {
      demo.scrollLeft-=demo1.offsetWidth
    }else {
      demo.scrollLeft++
    }
  },50)
}

.out{
overflow: hidden;
width: 80%;
margin-left: 5%
}
.out .qimo{
  width: 8000%;
  height: 2rem;
}
.out .qimo div{
  float: left
}
.out .qimo ul{
  float: left;
  height: 2rem;
  overflow: hidden;
  zoom:1
}
.out .qimo ul li{
  float: left;
  line-height: 2rem;
  list-style: none;
}
.out li a{
  margin-right: 0.1rem;
  color: #466DFF;
  font-size: 0.14rem;
}