vue js实现热点信息横向无限滚动悬浮停止

最新推荐文章于 2024-07-03 16:16:57 发布

美式半塘不加奶

最新推荐文章于 2024-07-03 16:16:57 发布

阅读量325

点赞数 1

文章标签： js html vue javascript css3

本文链接：https://blog.csdn.net/weixin_45018495/article/details/114846775

版权

本文介绍如何使用 Vue.js 和 CSS3 实现一个热点信息的横向无限滚动效果，并在鼠标悬停时停止滚动，提供了一种增强用户体验的方法。

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

 <div class="my-outbox" v-show="noticeList.length>0">
          <p class="callMsg"><img style="width:24px" src="@/assets/img/喇叭.gif" alt=""> 重要通知：</p>
          <div class="my-inbox " ref='box' >
              <div class="my-list  box-cursor" v-for="(item,index) in noticeList"  @mouseover="stopScroll" @mouseout="startScroll" :key='index' @click="jumpWeb(item)" ref="itemlist">
                  <span class="my-uname"><img src="@/assets/img/icon-new.gif" style="margin-right:8px" alt="">{
  {item.title}}</span>
                  <span class="my-time">{
  {item.time}}</span>
              </div>
              <div class="m