You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<template> <div class="marquee-box"> <div class="marquee-content" ref="out"> <p :class="run?speed:''"> <span class="text1" ref="in" >{{content}}</span> <span class="text2" v-if="showtwo||run">{{content}}</span> </p> </div> </div> </template>
<script> export default { name: 'VueMarquee', data (){ return{ run: false, pWidth: '', } }, props: { content: { default: "暂无公告内容", type: String }, speed: { default: 'slow', type: String }, showtwo: { default: true } }, watch: { content (){ var _this = this; setTimeout(()=>{ _this.$nextTick(()=>{ let out = _this.$refs.out.clientWidth; let _in = _this.$refs.in.clientWidth; _this.pWidth = 2*_in; _this.run=_in>out?true:false; }); },0); } }, mounted (){ var _this = this; this.$nextTick(()=>{ let out = _this.$refs.out.clientWidth; let _in = _this.$refs.in.clientWidth; _this.run=_in>out?true:false; }); } } </script> <style lang="scss" scoped> .marquee-box { height: 24px; line-height: 24px; color: #DD1D35; font-size: 12px; } .marquee-content{ overflow: hidden; width:100% } .marquee-content p{ display: inline-block; white-space: nowrap; margin: 0; font-size: 0; } .marquee-content span{ display: inline-block; white-space: nowrap; padding-right: 300px; font-size: 12px; }
.quick{ -webkit-animation: marquee 5s linear infinite; animation: marquee 5s linear infinite; } .middle{ -webkit-animation: marquee 8s linear infinite; animation: marquee 8s linear infinite; } .slow{ -webkit-animation: marquee 25s linear infinite; animation: marquee 25s linear infinite; } @-webkit-keyframes marquee { 0% { -webkit-transform: translate3d(0,0,0); } 100% { -webkit-transform: translate3d(-50%,0,0); } } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%);} } </style>
|