如何使用VB制作文字跑马灯

发布网友

我来回答

共5个回答

懂视网

本篇文章给大家带来的内容是关于实现文字跑马灯的三种方式介绍（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近写了一个文字跑马灯的项目需求，刚开始用js写，能够完成需求。后面想着换种方式(分别是html和css)来实现同一个需求,以减少性能消耗。

首先，需求分析:

需求点1.判断文字的长度和容器的长度，如果文字长度大于容器长度则开始滚动，否则不滚动；

需求点2.判断滚动滚动的结束，在结束的时间点触发事件(比如: 增减样式等操作)；

一、JS实现

思路:

1.判断文字的长度和容器的长度，如果文字长度大于容器长度，则开始滚动，否则不滚动。(offsetWidth)

2.获取滚动条到元素左边的距离,递归滚动,直到滚动后的距离等于文字的长度退出递归。(scrollLeft)

效果图

注释: 文字抖动现象是因为录制时间过长，ps制作gif文件只能是500帧以下，通过降低帧率才出现了文字抖动。

代码部分

HTML：

<div class="box">
 <div class="content">
 <p class="text">1.文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</p>
 </div>
</div>

CSS：

*{
 margin:0;
 padding:0;
}
.box{
 margin-left: 200px;
 margin-top: 100px;
 color: #FFF;
 white-space: nowrap;
 overflow: hidden;
 width: 300px;
 background: #000;
}
.content p{
 display:inline-block;
}
.content p.padding{
 padding-right: 300px;
}

JS：

let [box, content, text] = [
 document.querySelector('.box'),
 document.querySelector('.content'),
 document.querySelector('.text')
]
let [textWidth, boxWidth] = [
 text.offsetWidth,
 box.offsetWidth
]
window.onload=function checkScrollLeft(){
 // 判断文字长度是否大于盒子长度
 if(boxWidth > textWidth){ return false}
 content.innerHTML += content.innerHTML
 document.querySelector('.text').classList.add('padding')
 // 更新
 textWidth = document.querySelector('.text').offsetWidth
 toScrollLeft()
}
function toScrollLeft(){
 // 如果文字长度大于滚动条距离，则递归拖动
 if(textWidth > box.scrollLeft){
 box.scrollLeft++
 setTimeout('toScrollLeft()', 18);
 }
 else{
 // setTimeout("fun2()",2000);
 }
}

小结

js的方式能够完美的满足子需求点1和自需求点2。

判断文字和容器的长度可以通过offsetWidth来判断。如果文字长度大于容器长度，则开始滚动。

window.onload=function checkScrollLeft(){
 // 判断文字长度是否大于盒子长度
 if(boxWidth >= textWidth){ return false}
 content.innerHTML += content.innerHTML
 document.querySelector('.text').classList.add('padding')
 // 更新
 textWidth = document.querySelector('.text').offsetWidth
 // 开始滚动 触发事件
 toScrollLeft()
}

判断滚动的结束根据滚动条到元素左边的距离和文字的长度判断，如果滚动条到元素左边的距离等于文字的长度，则结束滚动。

function toScrollLeft(){
 // 如果文字长度大于滚动条距离，则递归拖动
 if(textWidth > box.scrollLeft){
 box.scrollLeft++
 setTimeout('toScrollLeft()', 18);
 }
 else{
 // 滚动结束 触发事件
 }
}

二、HTML实现

效果图:

代码部分:

 <marquee behavior="behavior" width="200" loop="2">1.文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</marquee>

非常简洁的代码~、~

marquee的API

虽然marquee标签的api十分丰富，但是该标签在MDN上是这样描述的：

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

元素已经过时，请不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。此外，使用这个元素基本上是你可以对你的用户做最糟糕的事情之一，所以请不要这样做。

所以，根据咱们IT圈内的紧跟文档标准的原则，对marquee标签，我们在项目中请尽量不要使用

三、CSS实现

效果图

代码部分

HTML：

<div class="wrap">
 <div class="cont">
 <p class="txt">1.文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</p>
 <p class="txt">1.文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</p> 
 </div>
</div>

CSS：

*{
 padding: 0; 
 margin: 0; 
 box-sizing: border-box;
}
.wrap{ 
 margin:10% auto; 
 background: #ddd; 
 font-size: 0; 
 /* 固宽，溢出隐藏 */
 width: 300px; 
 height: 40px; 
 overflow: hidden;
 white-space: nowrap;
 /* 相对定位 */
 position: relative;
}
.wrap .cont{
 position: absolute; 
 top: 0;
 left: 0; 
 height: 100%;
 /* 关键 */
 width: 200%;
 transition:left 10s linear;
}
.wrap .txt{ 
 display: inline-block; 
 font-size: 18px;
 line-height: 30px; 
 margin-top: 5px; 
 color: #fff;
 background: #000;
}

JS：

var cont = document.querySelector('.cont')
var wrap = document.querySelector('.wrap')
var text = document.querySelector('.txt')
var wrapWidth = wrap.offsetWidth
var textWidth = text.offsetWidth
window.onload=function checkScrollLeft(){
 // 判断文字长度是否大于盒子长度 开始滚动
 if(textWidth > wrapWidth) {
 text.style.paddingRight = '300px'
 cont.style.left = "-870px"
 }
 // 滚动结束
 document.addEventListener("transitionend", function (){
 console.log("end")
 }, false)
}

小结

CSS能满足子需求点1，能够判断什么时候开始滚动。

window.onload=function checkScrollLeft(){
 // 判断文字长度是否大于盒子长度
 if(textWidth > wrapWidth) {
 // 开始滚动 触发事件
 text.style.paddingRight = '300px'
 cont.style.left = "-870px"
 }
}

同时，也能满足子需求点2，判断滚动的结束。

// 滚动结束
document.addEventListener("transitionend", function (){
 console.log("end")
}, false)

结语

回顾需求

需求点1.判断文字的长度和容器的长度，如果文字长度大于容器长度则开始滚动，否则不滚动；

需求点2.判断滚动滚动的结束，在结束的时间点触发事件(比如: 增减样式等操作)；

实现方式的优劣对比

	js实现跑马灯效果	html实现跑马灯效果	css实现跑马灯效果
需求点1	??	?	??
需求点2	??	?	??
兼容性	??	?	?

如果需要满足需求，js和css都能够实现。但是考虑到兼容性，css在ios9以下，安卓4.4以下不支持，其他好的解决方案在考虑中。如果你有好的解决方案，欢迎在下方留言与我交流~

另外，css用作单纯的展示效果用还是能优先考虑的，比如下方的css无缝滚动

效果图

代码部分

HTML：

<div class="wrap">
 <div class="cont">
 <p class="txt">1.文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</p>
 <p class="txt">2.文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</p>
 </div>
</div>

CSS：

*{
 padding: 0; 
 margin: 0; 
 box-sizing: border-box;
}
.wrap{ 
 position: relative; 
 width: 40%; 
 height: 40px; 
 margin:10% auto; 
 background: #ddd; 
 font-size: 0; 
 overflow: hidden;
}
.wrap .cont{
 position: absolute; 
 top: 0; 
 left: 0;
 /* 宽度 大于容器的两倍即可 */
 width: 200%; 
 -webkit-animation:5s move infinite linear;
}
.wrap .txt{ 
 font-size: 18px; 
 color: #fff;
 display: inline-block; 
 /* 宽度 等于容器的宽度 */
 width: 50%; 
 height: 30px; 
 border-left:1px solid #fff; 
 line-height: 30px; 
 text-align: center; 
 margin-top: 5px; 
 background: #000;
}
.wrap:hover .cont{ 
 -webkit-animation-play-state:paused;
}

@-webkit-keyframes move{
 /* 原理 left值的变化 移动一个容器的宽度 */
 0%{
 left: 0;
 }
 100%{
 left: -100%;
 }
}

所以，工具本身没有优劣之分，什么时候用什么工具。我们要有清晰的思路。

热心网友

左右旋转是怎么样的？
如果你想要字从左边出来，跑到右边，到右边出去，再从左边出来的话，可以这样简单地做做，

用个定时器，间隔时间可设为10ms，初始为可用状态。
一个标签。
在定时器中写代码，
Private Sub Timer1_Timer()
Label1.Left = Label1.Left + 10
If Label1.Left > Form1.Width Then Label1.Left = -Label1.Width
End Sub

如果你想让文字用别的方式跑，自己可以设置文字的显示位置和方向。
文字到达右边框的时候叫 label1.left 减数，则回头往左边跑，像左右在窗口中振荡一样。
修改定时器间隔时间和标签移动的步长，可以改变文字转跑的效果，自己调的试试。

热心网友

文字跑马灯是什么东东,说具体的左右旋转是指在相同的坐标上自己转吧???像地球自转一样???好像比较难,容我想想,我觉得VB就算能实现这个左右旋转代码也的很多的,何况这不是简单的VB能解决的....如果你执意想完成,我见意你把文件放在图片上,然后用图片设计软件等工具多设计几张图片,这些图片要分别代表文字旋转时的平面切图````然后把所有的图片按顺序排列好并放在相同的坐标.再接着依次显示出这些图片,(当然,每次只显一张,其余隐藏)这样就能达到像地球左右自转那种效果了```

热心网友

Private Sub tmrNotice_Timer()
lblNotice.Caption = Right(lblNotice.Caption, Len(lblNotice.Caption) - 1) & Left(lblNotice.Caption, 1)
End Sub

热心网友

先获取文字长度，不停截取文字位置不停加或减

全部频道

如何使用VB制作文字跑马灯