vue+element实现滚动公告栏效果

（自己小练习，欢迎批评指正）
思路：
1.将需要滚动的“公告内容”重复两遍，中间加空格，即：“公告内容公告内容”
2.利用margin-left递减使公告左移
3.当第二遍公告内容移动到第一遍公告内容初始位置时，即左移动了“公告内容 ”的长度，此时margin-left恢复到初始值，即公告回到初始位置，因为第二遍目前在第一遍的初始位置，所以视觉上没有停顿4.margin-left继续递减使公告左移，回到3
（公告长度并没有超出范围时不滚动）

<template><el-card class="TopCard" style="height:50px"><!-- 小喇叭 --><i class="el-icon-chat-dot-round" style="color:#606266"/><span class="tips">公告：</span><!-- 滚动文字外层div，文字能展示的区域--><div class="noticeBox" :style="'width:'+noticeWidth+'px;height:20px;position:relative;overflow:hidden;display:inline-block;vertical-align:middle;margin-top:-5px'"><!-- 滚动div，marginLeft变化--><div :style="'margin-left:'+marginLeft+'px;white-space:nowrap'"><span class="showNotice">{{showNotice}}</span><!-- 不会展示，用来测量第二条与第一条重合时的长度 --><span class="notice">{{notice}}</span></div></div></el-card>
</template><script>
export default {name: 'Home',data () {return {// 适应屏幕分辨率noticeWidth: window.screen.width - 150,// 公告展示（过长时会重复两遍）showNotice: '',// 用于公告过长时，获取重复两遍中第一遍的长度notice: '',// 公告初始位置marginLeft: 100}},mounted () {this.noticeData = ['公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一', '公告二']this.noticeData.forEach((val, index) => {if (index === 0) {this.showNotice += '【' + (index + 1) + '】' + val} else {this.showNotice += '\xa0\xa0\xa0\xa0\xa0\xa0【' + (index + 1) + '】' + val}})// 公告上面先赋值，再获取宽度setTimeout(() => {// 公告div长度var oneNoticeWidth = document.getElementsByClassName('showNotice')[0].offsetWidth// 公告外层div长度var noticeBoxWidth = document.getElementsByClassName('noticeBox')[0].offsetWidth// 一条公告长度太大时，才滚动if (oneNoticeWidth > noticeBoxWidth) {// 滚动公告需要将公告重复两遍进行滚动，两遍中间需要加空格this.notice = this.showNotice + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'// 上面先赋值，再获取宽度setTimeout(() => {// 获取一遍加中间空格的长度，即左移时第二遍与第一遍完全重合时的长度var oneNoticeAddEmptyWidth = document.getElementsByClassName('notice')[0].offsetWidth// 公告内容重复两遍this.showNotice = this.notice + this.showNoticethis.timer = setInterval(() => {this.marginLeft -= 1// 第二遍与第一遍起始位置重合时（第一条已完全移到左侧隐藏），marginLeft置0，即回到第一条if (this.marginLeft === (-1) * oneNoticeAddEmptyWidth) {this.marginLeft = 0}}, 20)}, 10)} else { //公告并没有很长时不滚动this.marginLeft = 0}}, 10)},
}
</script>
<style>
/* 公告card */
.TopCard .el-card__body{padding:0px 10px
}
/* 公告title */
.tips{line-height:50px;color:#606266;font-weight:bold
}
</style>

vue+element实现滚动公告栏效果相关推荐

php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
Vue组件——数字滚动抽奖效果
闲话不多说(希望对大家有帮助),那就直接上代码吧可调整数字滚动速度,可指定开奖延迟时间,可指定开奖数字,按个人需求自行改动(录了个效果供参考,临时找的录屏,表介意) 不一一精简了组件代码 < ...
VUE+element 上传视频
VUE+element上传视频效果展示 html部分 <el-form-item label="视频上传" prop="storageurl">& ...
vue+element之carousel走马灯的使用（The use of vue+element carousel）
2022.10.13 大家好,今天我使用了vue+element实现走马灯的效果,类似于轮播图,可以进行一个图片的滑动. Hello, everyone. Today, I used vue+elem ...
vue广告栏上下滚动效果
vue广告栏上下滚动效果 html部分 <div class="roll"><img src="xxx.jpg" alt /><u ...
vue实现数字滚动效果
vue实现数字滚动效果 npm 下载 vue-count-to https://npmmirror.com/package/vue-count-to
vue+element 实现点击左侧树形控件实现右侧滚动定位
树形控件实现定位+平滑滚动(左树形右内容) vue+element 实现点击左侧树形控件实现右侧滚动定位具体实现代码如下: <template><div class="d ...
Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔
Vue top栏滚动显隐和文字字体颜色过渡动画效果随笔好长时间没用css动画效果了,今天恰好在封装某个组件时用上,随笔记下. <template><div class=" ...
php公告栏系统,不间断上下循环滚动的公告栏效果
不间断上下循环滚动的公告栏效果 -//W3C//DTD HTML 4.0 Transitional//EN"> 不间断上下循环滚动的公告栏效果 ·本周捐赠逾亿元(8.22发布) ·本周 ...

vue+element实现滚动公告栏效果

vue+element实现滚动公告栏效果相关推荐

最新文章

热门文章