vue实现横屏滚动公告效果
时间:2022-09-11 11:25:57|栏目:vue|点击: 次
本文实例为大家分享了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="">累计练习时长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
下一篇:解决vue admin element noCache设置无效的问题
本文标题:vue实现横屏滚动公告效果
本文地址:http://www.codeinn.net/misctech/213340.html