![706ddc5a15346515b52549cd47ed2db0.gif](https://i-blog.csdnimg.cn/blog_migrate/6f96b03db1f9080f1040a3710bdd02fc.gif)
![706ddc5a15346515b52549cd47ed2db0.gif](https://i-blog.csdnimg.cn/blog_migrate/6f96b03db1f9080f1040a3710bdd02fc.gif)
![8f2b2c5ebee9b5a92535b7cdba6057b2.png](https://i-blog.csdnimg.cn/blog_migrate/6115e473a50595db6ecdec67b611f876.png)
在大屏幕上实现中高风险地区的展示,如果数据量小,静态显示;如果数据量大实现不停歇滚动播放。
0 2html![8f2b2c5ebee9b5a92535b7cdba6057b2.png](https://i-blog.csdnimg.cn/blog_migrate/6115e473a50595db6ecdec67b611f876.png)
<template> <el-row class="main" :span="24"> <el-col :span="3" class="high-title">今日中高风险地区el-col> <el-col :span="18" class="PackagingShell" id="PackagingShell"> <div id="viewBox"> <span id="marquee">{{ text }}span> <span id="transcript">span> div> <div id="hide">{{ text }}div> el-col> el-row>template>
0
3css部分
![8f2b2c5ebee9b5a92535b7cdba6057b2.png](https://i-blog.csdnimg.cn/blog_migrate/6115e473a50595db6ecdec67b611f876.png)
<style scoped>.main { width: 100%;}.high-title { color: #d14c3e; border-right: 2px solid #00ffff;}/*公告滚动盒子样式*/.PackagingShell { overflow: hidden; color: #fde665; text-align: left; padding-left: 20px;}/*主题内容块设置*/#viewBox,#marquee { white-space: nowrap;}/*获取宽度的块,用z-index隐藏*/#hide { position: absolute; z-index: -999; top: -9999px; white-space: nowrap;}style>
0
4js
![8f2b2c5ebee9b5a92535b7cdba6057b2.png](https://i-blog.csdnimg.cn/blog_migrate/6115e473a50595db6ecdec67b611f876.png)
<script>export default { data() { return { text: '', // 内容 textWidth: 0, // 字符长度 isScroll: false, // 是否滚动 highList: [ { value: 1, label: '天山区' }, { value: 2, label: '乌鲁木齐市沙依巴克区' }, { value: 3, label: '乌鲁木齐市新市区' }, { value: 4, label: '乌鲁木齐市头磨沟区' }, { value: 5, label: '乌鲁木齐市头屯河区' }, { value: 6, label: '大连市西岗区' } ] }; }, methods: { /* 初始化函数 */ init() { let str = this.highList .map(function(e) { return e.value + '.' + e.label; }) .join(' ;'); this.text = str; }, move() { let width = document.getElementById('hide').getBoundingClientRect().width; // 获取展示块盒模型宽度 let BoxWidth = document.getElementById('PackagingShell').offsetWidth; // 获取内容展示宽 let viewBox = document.getElementById('viewBox'); // 设置初始位移距离 let distance = 0; // 移动函数,通过定时器实现 setInterval(function() { // 位移内用记录是是递减,此处的 1 控制移动变量 s distance = distance - 1; // 判断是否整个内容移动完 if (-distance >= width) { // 若移动完,则重新设定位移值,此处赋值200是正好把 上面设置的块间距 200px 也加入移动范围,实现移动完无缝跳转 distance = 100; } // 实时设置位移距离 viewBox.style.transform = 'translateX(' + distance + 'px)'; }, 27); // 移动时间间隔t s和t 共同决定移动速度 } }, mounted() { this.init(); }, // 更新的时候运动 updated: function() { this.move(); }};script>
0
5效果
![8f2b2c5ebee9b5a92535b7cdba6057b2.png](https://i-blog.csdnimg.cn/blog_migrate/6115e473a50595db6ecdec67b611f876.png)
![c6154a61a67472f22da75b21c714dac5.gif](https://i-blog.csdnimg.cn/blog_migrate/1e84694816476b214aafd6a2ded8b295.gif)
![706ddc5a15346515b52549cd47ed2db0.gif](https://i-blog.csdnimg.cn/blog_migrate/6f96b03db1f9080f1040a3710bdd02fc.gif)
![85c8e60c86e50cab97cddec42b6663b8.png](https://i-blog.csdnimg.cn/blog_migrate/b27d6fb0a750d0969d87ba89dc9d2a19.jpeg)
![706ddc5a15346515b52549cd47ed2db0.gif](https://i-blog.csdnimg.cn/blog_migrate/6f96b03db1f9080f1040a3710bdd02fc.gif)