vue横屏滚动公告

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个横屏滚动公告的效果。通过监听鼠标进入和离开事件来控制滚动的启停,并通过计算公告文本的宽度和屏幕宽度来实现平滑滚动。涉及到的技术点包括DOM操作、计时器、CSS样式和事件监听。

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

【前言】

横屏滚动的公告
在这里插入图片描述

【正文】

HTML文件

<template>
  <div id="box" ref="box">
    <div class="marquee-box" ref="marquee" @mouseover="menter" @mouseleave="mleave">
      <p ref="cmdlist" id="pWidth">
        <img style="width: 12px;height: 12px" src="../assets/logo.png" alt="">累计练习时长1小时,可以获得1次抽奖机会,奖品有。。。。。
      </p>
    </div>
  </div>
</template>

JS文件内容

export default {
  name: 'HelloWorld',
  data () {
    return {
      value: 0,
      timer: '',//计时器
      pwidth:0,//公告文本的宽度
      windowWidth:document.documentElement.clientWidth,// 设备屏幕的宽度
      }
    },

  mounted() {
    let element = this.$refs.cmdlist;
    this.pwidth = document.defaultView.getComputedStyle(element,'').width.split('px');
    this.timer = setInterval(this.clickCommend, 20);
  },
  
  watch:{
    value(newValue, oldValue) {
      let allWidth= parseInt(this.windowWidth)+parseInt(this.pwidth[0]);
      if(newValue <= -allWidth){
        this.$refs.cmdlist.style.marginLeft = this.windowWidth+"px";
        this.value = 0;
      }
    },
  },
  
  methods:{
    clickCommend(e) {
      let _this = this;
      this.$nextTick(() => {
        this.value -=1;
        this.$refs.cmdlist.style.marginLeft = _this.windowWidth+this.value+"px";
      });
    },
    menter(){
      clearInterval(this.timer);
    },
    mleave(){
      this.timer = setInterval(this.clickCommend, 20);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}

CSS样式

<style scoped>
#box {
  width: 100%;
  height: 50px;
  margin-top: 50px;
  position: relative;
}
.marquee-box  {
  position: relative;
  width: 100%;
  height: 100%;
  overflow:auto;
  background-color: #f8f8f8;
}
#pWidth{
  width: 100%;
  height: 50px;
  padding: 0;
  margin: 0;
  line-height: 50px;
  display: block;
  word-break: keep-all;
  white-space: nowrap;
  overflow:hidden;
  font-family: 微软雅黑; fontSize:14px;
  background-color: #f8f8f8
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;height: 0;
}
</style>

感谢阅读~

### Vue公告组件滚动效果示例 以下是基于Vue实现的一个完整的公告组件滚动效果的代码示例。此方案综合了多种实现方式的优点,提供了灵活的配置选项。 #### 组件定义 (ScrollAnnouncement.vue) ```vue <template> <div class="announcement-container"> <ul class="scroll-list" :style="{ transform: `translateX(${transform}px)` }"> <li v-for="(item, index) in scrollList" :key="index" class="scroll-item">{{ item }}</li> </ul> </div> </template> <script> export default { name: "ScrollAnnouncement", props: { lists: { type: Array, required: true, default: () => [] }, speed: { type: Number, default: 20 } }, data() { return { transform: 0, timer: null, scrollList: [], containerWidth: 0, listItemWidth: 0 }; }, mounted() { this.init(); this.startScroll(); }, beforeDestroy() { clearInterval(this.timer); }, methods: { init() { const ulElement = document.querySelector(".scroll-list"); if (!ulElement || !this.lists.length) return; // 获取容器宽度和单个项宽度 this.containerWidth = ulElement.offsetWidth; this.listItemWidth = ulElement.children[0].offsetWidth + parseInt(window.getComputedStyle(ulElement).columnGap); // 复制一份数据用于无缝滚动 this.scrollList = [...this.lists, ...this.lists]; }, startScroll() { let currentIndex = 0; this.timer = setInterval(() => { currentIndex += this.speed / 10; if ( Math.abs(currentIndex * this.listItemWidth) >= this.containerWidth + this.listItemWidth ) { currentIndex = 0; } this.transform = -currentIndex * this.listItemWidth; }, 10); } } }; </script> <style scoped> .announcement-container { overflow: hidden; white-space: nowrap; } .scroll-list { display: flex; transition: all 0.1s linear; padding: 0; margin: 0; list-style: none; } .scroll-item { margin-right: 10px; /* 设置间距 */ } </style> ``` --- #### 调用示例 在需要使用的页面中引入并注册该组件: ```vue <template> <div class="app-container"> <h3>欢迎来到我们的平台</h3> <ScrollAnnouncement :lists="announcements" :speed="20" /> </div> </template> <script> import ScrollAnnouncement from "./components/ScrollAnnouncement"; export default { components: { ScrollAnnouncement }, data() { return { announcements: [ "欢迎您加入我们共同学习!", "在这里您可以找到丰富的资源。", "一起努力成为更好的自己!" ] }; } }; </script> <style scoped> .app-container { text-align: center; background-color: #f5f5f5; padding: 20px; } h3 { color: #333; } </style> ``` --- ### 功能说明 1. **动态调整速度** 用户可以通过`speed`属性控制滚动的速度,默认值为20像素每秒[^1]。 2. **无缝滚动** 利用了数组复制的方式实现了平滑过渡的效果,当最后一项消失时立即回到第一项[^2]。 3. **响应式设计** 基于容器的实际尺寸计算每一项的内容宽度以及总移动距离,从而适应不同幕大小下的显示需求[^4]。 4. **可扩展性强** 支持通过传入不同的`lists`参数来自定义展示的文字内容;同时也支持进一步定制样式以满足特定场景的要求[^3]。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张_Laura

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值