本文实例为大家分享了vue实现横屏滚动公告效果的具体代码，供大家参考，具体内容如下
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="vue实现横屏滚动公告效果_vue.js" 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>