网页顶部滚动消息组件（marquee）

最新推荐文章于 2024-05-30 10:07:38 发布

杨哥杨哥万万岁

最新推荐文章于 2024-05-30 10:07:38 发布

阅读量647

点赞数

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/wozhenhaokan/article/details/127515010

版权

这篇博客介绍了如何在marquee标签即将被弃用的情况下，利用Vue.js自行创建一个具备消息滚动播放、动态计算播放时长及鼠标悬停暂停功能的网页组件。

摘要由CSDN通过智能技术生成

记得很早之前实现这种滚动消息一般都是用marquee标签包起来就ok了，但是这个标签好像是即将弃用了，所以这次需求出来以后准备自己写一个

实现了什么功能

1，消息滚动播放

2，根据实际数据情况自动计算animation-duration时间

3，鼠标移入暂停

代码：

<template>
  <!-- 消息滚动组件 -->
  <div class="marquee">
    <div class="marquee_wrapper"
         :style="{animationDuration: `${marqueeList.length*2}s`}">
      <span class="marquee_slide"
            v-for="item in marqueeList"
            :key="item">{
  { item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      marqueeList: ['第1条消息', '第2条消息', '第3条消息', '第4条消息', '第5条消息', '第6条消息', '第7条消息', '第8条消息', '第9条消息', '第10条消息', '第11条消息', '第12条消息']
    }
  }
}
</scr