-
vue中实现文字超出横向滚动
2020-12-15 16:51:38vue中实现文字超出横向滚动 marquee组件 <template> <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll" ref="scroll"> <p class="marquee">{{text}}</p> <p...vue中实现文字超出横向滚动
marquee组件
<template> <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll" ref="scroll"> <p class="marquee">{{text}}</p> <p class="copy" ref="copy"></p> </div> <p class="getWidth" ref="getWidth">{{text}}</p> </div> </template> <script> export default { name: 'marquee', props: ['val'], data () { return { timer: null, text: '' } }, created () { let timer = setTimeout(() => { this.move() clearTimeout(timer) }, 1000) }, mounted () { for (let item of this.val) { this.text += item } }, methods: { move () { let maxWidth = this.$refs['marquee-wrap'].clientWidth let width = this.$refs['getWidth'].scrollWidth if (width <= maxWidth) return let scroll = this.$refs['scroll'] let copy = this.$refs['copy'] copy.innerText = this.text let distance = 0 this.timer = setInterval(() => { distance -= 1 if (-distance >= width) { distance = 16 } scroll.style.transform = 'translateX(' + distance + 'px)' }, 20) } }, beforeDestroy () { clearInterval(this.timer) } } </script> <style scoped> .marquee-wrap { width: 100%; overflow: hidden; position: relative; } .marquee{ margin-right: 0.16rem; } p { word-break:keep-all; white-space: nowrap; font-size: 0.28rem; } .scroll { display: flex; } .getWidth { word-break:keep-all; white-space:nowrap; position: absolute; opacity: 0; top: 0; } </style>
使用marquee组件
//引入组件 import Marquee from './marquee' //注册并使用 <Marquee :val=""></Marquee>
-
Vue替代marquee标签超出宽度文字横向滚动效果
2020-10-15 21:49:27主要介绍了Vue替代marquee标签超出宽度文字横向滚动效果,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 -
css 超出文字头尾相接滚动_纯css 如何实现文本超出部分横向滚动
2020-12-22 13:09:51不使用任何js代码如何实现一段很长的文字横向滚动?纯css实现文字循环滚动效果* {margin: 0;padding: 0;}.box {width: 300px;margin: 0 auto;position: relative;border: 1px solid #ff6700;}.animate {padding-left...不使用任何js代码如何实现一段很长的文字横向滚动?
纯css实现文字循环滚动效果* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
margin: 0 auto;
position: relative;
border: 1px solid #ff6700;
}
.animate {
padding-left: 20px;
font-size: 12px;
color: #000;
white-space: nowrap;
animation: 15s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes wordsLoop {
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
君不见黄河之水天上来,奔流到海不复回,君不见高堂明镜悲白发,朝如青丝暮成雪,人生得意须尽欢,莫使金樽空对月
上面是我自己的实现,但总是到“金”这里横向滚动就结束了,要怎么解决一下?
-
Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果
2019-11-25 14:25:24后加文字即可,当超过文本容器长度时,触动横向滚动效果。 二、直接引入组件 marquee组件 < template > < div class = " marquee-wrap " > < div class = " scroll " > < p class = " marquee ...一、npm 安装
如果你想安装插件(自己写的)
安装
# install dependencies npm i marquee-components
使用
在main.js引入
import marquee from 'marquee-components' Vue.use(marquee );
在页面使用
<template> <div id="app"> <marquee :val="msg"></marquee> </div> </template> <script> export default { name: 'app', data () { return { msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue' } } } </script>
val
后加文字即可,当超过文本容器长度时,触动横向滚动效果。二、直接引入组件
marquee组件
<template> <div class="marquee-wrap"> <div class="scroll"> <p class="marquee">{{text}}</p> <p class="copy"></p> </div> <p class="getWidth">{{text}}</p> </div> </template> <script> export default { name: 'marquee', props: ['val'], data () { return { timer: null, text: '' } }, created () { let timer = setTimeout(() => { this.move() clearTimeout(timer) }, 1000) }, mounted () { for (let item of this.val) { this.text += ' ' + item } }, methods: { move () { let maxWidth = document.querySelector('.marquee-wrap').clientWidth let width = document.querySelector('.getWidth').scrollWidth if (width <= maxWidth) return let scroll = document.querySelector('.scroll') let copy = document.querySelector('.copy') copy.innerText = this.text let distance = 0 this.timer = setInterval(() => { distance -= 1 if (-distance >= width) { distance = 16 } scroll.style.transform = 'translateX(' + distance + 'px)' }, 20) } }, beforeDestroy () { clearInterval(this.timer) } } </script> <style scoped> .marquee-wrap { width: 100%; overflow: hidden; position: relative; } .marquee{ margin-right: 16px; } p { word-break:keep-all; white-space: nowrap; font-size: 16px; font-family: "微软雅黑 Light"; } .scroll { display: flex; } .getWidth { word-break:keep-all; white-space:nowrap; position: absolute; opacity: 0; top: 0; } </style>
其他页面引入marquee组件
<template> <div class="container"> <marquee :val="title"></marquee> </div> </template> <script> import marquee from './marquee' name: 'index', components: { marquee }, data () { return { title: '' } }, </script>
-
vue内容横向循环滚动_Vue替代marquee标签超出宽度文字横向滚动效果
2021-01-13 18:18:42import marquee from './marquee' name: 'index', components: { marquee }, data () { return { title: '' } }, 总结 以上所述是小编给大家介绍的vue替代marquee标签超出宽度文字横向滚动效果,希望对大家有所帮助 ...一、npm 安装
如果你想安装插件(自己写的)
安装
# install dependencies
npm i marquee-components
使用
在main.js引入
import marquee from 'marquee-components'
vue.use(marquee );
在页面使用
export default {
name: 'app',
data () {
return {
msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
}
}
}
val后加文字即可,当超过文本容器长度时,触动横向滚动效果。
二、直接引入组件
marquee组件
{{text}}
{{text}}
export default {
name: 'marquee',
props: ['val'],
data () {
return {
timer: null,
text: ''
}
},
created () {
let timer = settimeout(() => {
this.move()
cleartimeout(timer)
}, 1000)
},
mounted () {
for (let item of this.val) {
this.text += ' ' + item
}
},
methods: {
move () {
let maxwidth = document.queryselector('.marquee-wrap').clientwidth
let width = document.queryselector('.getwidth').scrollwidth
if (width <= maxwidth) return
let scroll = document.queryselector('.scroll')
let copy = document.queryselector('.copy')
copy.innertext = this.text
let distance = 0
this.timer = setinterval(() => {
distance -= 1
if (-distance >= width) {
distance = 16
}
scroll.style.transform = 'translatex(' + distance + 'px)'
}, 20)
}
},
beforedestroy () {
clearinterval(this.timer)
}
}
.marquee-wrap {
width: 100%;
overflow: hidden;
position: relative;
}
.marquee{
margin-right: 16px;
}
p {
word-break:keep-all;
white-space: nowrap;
font-size: 16px;
font-family: "微软雅黑 light";
}
.scroll {
display: flex;
}
.getwidth {
word-break:keep-all;
white-space:nowrap;
position: absolute;
opacity: 0;
top: 0;
}
其他页面引入marquee组件
import marquee from './marquee'
name: 'index',
components: {
marquee
},
data () {
return {
title: ''
}
},
总结
以上所述是小编给大家介绍的vue替代marquee标签超出宽度文字横向滚动效果,希望对大家有所帮助
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
-
element的el-tree组件文字超出容器不出现横向滚动条问题
2019-01-17 15:05:52最近项目中遇到一个多级的树形结构,使用el-tree组件后,父容器规定了宽高,设置overflow:auto,但是超出后横向滚动条并没有出现。 查询原因是el-tree组件中class名为el-tree-node的div是块级元素,需要把它变为... -
文字如果超出了自动 向左 横向 滚动
2016-07-01 16:48:00文字如果超出了自动向左滚动 function scroll(){ var info = document.getElementById('info'); var div = info.getElementsByTagName('div')[0]; var p = document.getElementsByTagName('p')[0]; var ... -
解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题
2019-04-09 14:37:00解决这个问题的思路:设置下拉菜单的最大宽度,然后文字超出时,出现横向滚动条。 解决时的问题就是,设置了宽度,横向滚动条却不出现,如下图所示,直接将超出的文字隐藏,并且后面添加省略号 最后我添加了如下的... -
前端常用div变滚动(文字超出省略)
2020-10-10 20:57:26一、div变滚动轴效果 ... //横向滚动,左右滚动 overflow-y: scroll; overflow-x: hidden; white-space: nowrap; 二、文字超出省略 css代码 //单行超出省略 width: 200px; overflow: hidden; white -
解决div出现横向滚动条,背景色没铺满问题
2018-03-21 18:02:24问题描述(如图):div等块级元素默认宽度为100%,当页面渲染完后其宽度已经固定,这时候如果文字超出其宽度(如调用api后显示的结果),我们如果希望其出现滚动条,这时超过原宽度的部分背景可能跟文字背景不一样。... -
overflow-x和文字超出...显示
2018-04-12 07:26:26场景一: 拉伸浏览器宽度,不想让页面变形显示横向滚动条,该怎么设置? 解决方法: 给你想要的这块区域设置一个最小宽度 min-width复制代码 然后在他的父元素设置 overflow-x:hidden复制代码场景二: 拉伸浏览器屏幕时,... -
多个div在一个容器下横向布局,且实现滚动效果(不使用flex布局)
2020-08-28 17:51:57之前项目上有个需求就是:多个div在一个容器下横向布局,且实现滚动效果。...如果这里的文字超出了div的宽度,设置这个属性是没有问题的,但是目前的需求是想让如下的项目们都能排成一排 <div id -
文字换行
2018-11-03 22:17:00为行内元素设置width是无效的,但块级元素可以,所以文字不会超出span(即便出现横向滚动条),但会超出div 让div内的文字自动换行的三条CSS代码 white-space:normal; word-break:break-all; word-space:normal; ... -
cocos2dx cocos2dx 3.x 公告栏 通知栏 滚动字幕 区域弹幕 区域显示 实现
2016-12-10 10:40:13文字内容横向或者纵向滚动文字只在区域内显示,超出区域部分不显示 相关头文件 "2d/CCClippingNode.h" 注意:在cocos2dx 3.x版本中,方法名中的CC命名方式已经弃用,但是文件名中的CC依然有,所以此处的头文件名中... -
在vue中是文字换行
2019-12-23 15:02:34今天遇到一个问题,在显示静态资源没有请求接口的时候显示的数据可以进行换行,但是访问了接口后返回的数据正常,但是显示超出屏幕出现横向滚动条,找了半天的原因,发现可以用css进行操作 对你要进行操作的盒子进行... -
使用jq和css3自制横向左右滑动图片列表
2017-07-25 17:08:57定义一个定宽的容器,然后图片不换行并排显示,超出部分隐藏,隐藏x轴滚动条; 左右按钮点击,获取容器的滚动条位置,在此基础上加上固定移动距离,然后重置容器滚动条位置。 做法 左右箭头可以使用图片,我这里使用... -
windows编程12-edit和消息传递
2020-02-23 15:15:23edit 和消息传递 编辑框控件的窗口类名是edit。除了子窗口常用的风格 WS_CHILD...当输入文字超出横向显示范围时自动滚动(一般必选)。 ES_AUTOVSCROLL 当输入文字超出纵向显示范围时自动滚动。 ES_CENTER 文本... -
九、C语言创建桌面程序:编辑框控件
2020-04-10 15:23:51一、 编辑框控件的窗口类名是edit。除了子窗口常用的风格 WS_CHILD...当输入文字超出横向显示范围时自动滚动(一般必选)。 ES_AUTOVSCROLL 当输入文字超出纵向显示范围时自动滚动。 ES_CENTER 文本居中对齐。 ... -
vue2 element使用笔记总结
2021-01-05 11:07:282、el-tree组件文字超出容器不出现横向滚动条问题 .el-tree>.el-tree-node{ min-width:100%; display: inline-block; } 3.组件绑定原生事件使用.native修饰符 <el-button size="small" t... -
小程序scroll-view中文字不换行问题
2018-04-23 19:07:44时控制文字超出显示省略号,要求如图: 但实际中会出现如文字不换行或样式错乱的问题。横向滚动的实现如下:超过两行显示省略号:.scroll_txt{ word-wrap: break-word; display:-webkit-box; overflow...