vue 做文字滚动

梁小茹

已于 2023-03-10 14:23:43 修改

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js css javascript

于 2022-11-03 14:24:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46653486/article/details/127669410

vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何利用Vue.js结合CSS和JavaScript实现文字每隔几秒滚动的效果，通过展示关键代码来帮助开发者理解实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求是每过几秒跳到下一个
代码：

<div class="caseRB" :class="{'animate-up': animateUp}">
    <div class="case-item" v-for="(item,index) in caseList" @mouseover="infoOver(item)"                                        @mouseleave="infoLeave" @click="toCaseDetails(item.id)" :key="index">
       <div class="dian"></div>
        <div class="case-info">{{ item.title }}</div>
      </div>
</div>


data () {
	return {
	      timer : null,
	     animateUp: false,
	}
}
mounted() {
    this.timer = setInterval(this.scrollAnimate, 1500)
  },

methods: {
	//  动画
	scrollAnimate() {
	    this.animateUp = true
	    setTimeout(() => {
	      this.caseList.push(this.caseList[0])
	      this.caseList.shift()
	      this.animateUp = false
	    }, 500)
	  },
	  //鼠标移入事件
	  infoOver(item) {
	    this.caseListItem = item
	    clearInterval(this.timer)
	  },
	  // 鼠标移出事件
	  infoLeave() {
	    this.timer = setInterval(this.scrollAnimate, 1500)
	  },
}
// 样式
.animate-up {
    transition: all 0.3s ease-in-out;
    transform: translateY(-53px);
  }
.caseRB{
  margin-top: 50px;
  height: 200px;
  overflow: hidden;
  .case-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    .dian{
      width: 10px;
      height: 10px;
      background: #336CE9;
      border-radius: 5px;
      margin-right: 15px;
    }
    .case-info{
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;

    }
  }
  .case-item:hover{
    background: linear-gradient(90deg, #336CE9 0%, rgba(52,109,233,0) 100%);
    .dian{
      background: #FFFFFF;
    }
    .case-info{
      color: #FDFEFE;
    }
  }
}

ok！