vue 上实现无缝滚动播放文字系统公告
首先实现效果,当时的需求做的系统公告框设定一个宽度,超宽滚动播放,没超宽则静态展示,
有了需求,想了下实现原理,最开始打算js更改字体内容的方式,但是想了下感觉会有点麻烦,想起之前做了表格的左侧边固定,是利用了将表格分层两部分,滚动的时候通过translate来移动了表格的位置,实现的半边滚动,半边移动,这种办法可以用在我们这里,这样就实现了代码的横向滚动,这下就剩下无缝链接。
既然是用translate实现的滚动,我们可以在滚动前做好排版,将一个内容一样的div块紧贴在内容块后面一起滚动,并且在当前条滚动完后,恢复初始位置,且此位置必须与刚开始滚动前的位置像重合,看起效果就是滚动的无缝链接,
废话不多说下面直接贴代码,我尽量在代码注释里写进各部分功能,这里就不详细介绍
显示html部分
<template>
<div id="mar">
<!--主div分三部分,图标,系统公告名字,展示区域-->
<div class="header">
<!--图标-->
<img src="../../../static/img/notification.png">
<!--名字-->
<span class="announcement">系统公告:</span> </div>
<!--公告展示块-->
<div class="PackagingShell" id="PackagingShell">
<!--主题内容,展示内容区域-->
<div id="viewBox">
<!--文本主体-->
<span id="marquee">{{text}}</span>
<!--文本副本,实现无缝滚动-->
<span id="transcript" ></span>
</div>
<!--隐藏块,用于获取展示文本宽度-->
<div id="hide">{{text}}</div>
</div>
</div>
</template>
<style scoped lang="scss">
#mar {
/*系统公告字体颜色*/
.announcement{
color:#ff4786;
}
height:40px;
line-height: 40px;
/*公告滚动盒子样式*/
.PackagingShell {
width: 89%; /*滚动部分宽度*/
overflow: hidden; /*超出部分隐藏*/
font-size: 12px;
color: #111;
}
/*主题内容块设置*/
#viewBox {
/*设置内容框不可换行,确保两个div块始终在同一行*/
white-space: nowrap;
}
/*内容块设置*/
#marquee {
/*设置内容块不可换行*/
white-space: nowrap;
}
/*获取宽度的块,用z-index隐藏*/
#hide {
position: absolute;
z-index: -999;
top: -9999px;
white-space: nowrap;
}
/*浮动设置和图片设置*/
.header {
float: left;
font-size:12px;
>img{
vertical-align: middle;
}
}
}
</style>
接下来是比较关键的js 部分,主要的位移对比代码都在这里
<script>
import {getHomepageMessage} from '@/api/getdata'
export default {
name: 'Marquee',
data () {
return {
text: '', // 内容
textWidth: 0, // 字符长度
isScroll: false // 是否滚动
}
},
methods: {
init () { // 初始化函数
getHomepageMessage().then((response) => { // 接口请求
if (response.body.code !== '0000') {
return
}
// this.text = response.body.data[0].messageContent
// 滚动内容赋值
this.text = '滚动无缝链接测试滚动无缝链接测试滚动无缝链接测试滚动无缝链接测试滚动无缝链接测试滚动无缝链接测试滚动无缝链接测试滚动无缝链接测试滚动无缝链接测试滚动无缝链接测试'
})
.catch((response) => {
console.log(response, 'error')
})
},
move () {
// 首先获取整个内容的宽度,(展示内容会超出隐藏,无法通过获取盒子宽度取到实际的内容宽度)
// 所以专门造了一个 div 块来放内容,隐藏起来 (无法用根据字体内容来计算宽度的方法,存在误差,当内容较多
// 的时候误差会相对较大)
let width = document.getElementById('hide').getBoundingClientRect().width
// 获取展示块盒模型宽度
let BoxWidth = document.getElementById('PackagingShell').offsetWidth
// 获取内容展示宽
let viewBox = document.getElementById('viewBox')
// 判断内容是否超长
if ((BoxWidth - width) < 0) {
// 内容超长,则获取抄本元素
let transcript = document.getElementById('transcript')
// 抄本元素内容填充
transcript.innerText = this.text
// 设定抄本和主题之间的间距
transcript.style.marginLeft = '200px'
} else {
// 没有超长则return,不做任何操作
return
}
// 设置初始位移距离
let distance = 0
// 移动函数,通过定时器实现
setInterval(function () {
// 位移内用记录是是递减,此处的 1 控制移动变量 s
distance = distance - 1
// 判断是否整个内容移动完
if (-distance >= width) {
// 若移动完,则重新设定位移值,此处赋值200是正好把 上面设置的块间距 200px 也加入移动范围,实现移动完无缝跳转
distance = 200
}
// 实时设置位移距离
viewBox.style.transform = 'translateX(' + distance + 'px)'
}, 27) // 移动时间间隔t s和t 共同决定移动速度
}
},
mounted () {
// 初始化
this.init()
},
// 更新的时候运动
updated: function () {
this.move()
}
}
</script>
因为项目把所有api独立出去了,所以若果你直接复制是无法使用,
但是只需要在init 初始化函数里将其它内容删除,只留 给this.text 赋值的内容就行!
js部分的描述我全写在了注释里,这里就不单独讲一遍了
---------------------
作者:高数定积分
原文:https://blog.csdn.net/qq_43192782/article/details/85322971
版权声明:本文为博主原创文章,转载请附上博文链接!
vue 上实现无缝滚动播放文字系统公告的更多相关文章
- vue 自定义marquee无缝滚动组件
先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这 ...
- vue插件 vue-seamless-scroll 无缝滚动插件ES6使用总结
最近因为需求需要写一个项目信息无缝向上滚动组件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件.下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者 ...
- vue 上传头像悬浮显示文字
template部分: 头像外部加一个 div <div class="user-info-head"> </div> css 部分 <style ...
- js实现标准无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 无缝滚动文字
前言 用vue做无缝滚动,字体弹幕 就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, l ...
- vue无缝滚动的插件开发填坑分享
写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...
- JS实现文字图片无缝滚动
今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...
- 基于vue的无缝滚动组件
vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...
- 一个文字无缝滚动的jQuery插件
直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
随机推荐
- PHP 调第三方跨域接口示例
<?php ); //错误信息 ); //php启动错误信息 ini_set('date.timezone','Asia/Shanghai'); ); //打印出所有的 错误信息 ini_set ...
- Coursera, Deep Learning 5, Sequence Models, week3, Sequence models & Attention mechanism
Sequence to Sequence models basic sequence-to-sequence model: basic image-to-sequence or called imag ...
- Linux常用功能及实现命令
1.设置node.npm.appium等命令全局访问 因为 /opt/node/bin这个目录是不在环境变量中的,所以只能到该目录下才能执行node命令,如果在任意目录下执行node命令的话 ,必须通 ...
- centos7 五大查找常用命令
1.find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件. find的使用格式如下: $ find <指定目录> <指定条件> <指定动作> ...
- Core Mvc传值ViewData、ViewBag和return view(model)
先定义一个Model类Student namespace Lession.Models { public class Student { public string Name { get; set; ...
- 开源RPC Jupiter
ref https://github.com/fengjiachun/doc/tree/master/netty https://budairenqin.iteye.com/ https://blog ...
- Spring Boot Endpoint
Spring Boot 的 Endpoints 带着强烈的 DevOps 色彩, “you build it, you run it” ,开发不仅要关心如何实现功能,还需要关心服务在线上运行的状态,如 ...
- UML类图表达
什么是UML类图? 类图显示了一组类.接口.协作以及他们之间的关系.在UML中问题域最终要被逐步转化,通过类来建模,通过编程语言构建这些类从而实现系统.类加上他们之间的关系就构成了类图,类图中还可以包 ...
- P4070 [SDOI2016]生成魔咒
题目地址:P4070 [SDOI2016]生成魔咒 相信看到题目之后很多人跟我的思路是一样的-- 肯定要用 SA(P3809 [模板]后缀排序) 肯定要会求本质不同的子串个数(P2408 不同子串个数 ...
- mac环境下支持PHP调试工具xdebug,phpstorm监听
先让php支持xdebug 方式一: https://xdebug.org/download.php 下载相应的xdebug 可以到http://xdebug.org/wizard.php 把php ...