html滚动文本框

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html滚动文本框相关的知识,希望对你有一定的参考价值。

我在作滚动文本框时,当文本滚动时,当最后一行滚动出文本框时才开始下一次,这样,中间会有一段时间有一大片空白,怎么才能使最后一行刚开始出现在文本框时,第一行马上接着就开始滚动实现这样的循环

参考技术A <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" >
<div align="left" >

</div >
<center ><font face="黑体" color="#008000" size="4" ></font ></center >
<div align="left" >

</div >
<center >
<p ><font color="#ff6600" size="4" >滚动文字</font ></p >
<p ><font color="#ff4500" size="4" >滚动文字</font ></p >
<p ><font color="#ff3300" size="4" >滚动文字</font >

</p >
</marquee >

marquee 参数:
BGColor:滚动文本框的背景颜色。
Direction:滚动方向设置,可选择Left、Right、up和down。
scrolldelay:每轮滚动之间的延迟时间,越大越慢。
scrollamount:一次滚动总的时间量,数字越小滚动越慢。
Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。
Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
loop:滚动次数。默认为infinite
hspace、vspace:前后、上下的空行。
参考技术B <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向左滚动</title>
<style type="text/css">
<!--
body font-size: 9pt;color: #000000;
a color: #0000FF;text-decoration: none;
a:hover color: #FF0000;text-decoration: underline;
-->
</style>
</head>
<body>
<div id="marquees">
天使之城,呀呀!嘿!飞洒发萨地方萨贩毒阿开工;拉萨交流;个了;阿哥
</div>

<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="javascript">
marqueesWidth=200;
with(marquees)
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");

preLeft=0; currentLeft=0; stopscroll=false;

function init()
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth)
templayer.innerHTML+=marquees.innerHTML;

marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollLeft()",10);
init();

function scrollLeft()
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=1;
if(preLeft==marquees.scrollLeft)
marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;


</script>
</body>
</html>
给你个例子,看看就明白了

SwiftUI 中的选取框(滚动)文本

【中文标题】SwiftUI 中的选取框(滚动)文本【英文标题】:Marquee (scrolling) Text in SwiftUI 【发布时间】:2020-01-25 15:17:13 【问题描述】:

我在 SwiftUI 中实现选取框(滚动)文本视图时遇到了困难。问题是文本需要在原始 (0) 位置停留 2 秒,然后开始向左移动,出现在右侧并继续滚动直到 0 位置并再次等待 2 秒。

【问题讨论】:

此答案适用于动态文本:***.com/a/60794726/5185323 【参考方案1】:

您可以使用 this video 中的内容来使某些东西正常工作,但老实说,如果您的视图以任何方式响应,则很难使其适用于不同的屏幕尺寸。但是,如果您将该视频中的基础用于动画并将其与几何阅读器相结合以获得零位置和最右边的入口点位置,则可以使滚动定位正确。

至于开始和停止,我建议您使用 Timer 来切换一个名为 scrollText 的布尔 @State 变量,以在动画持续 2 秒后开始/停止动画。您可以首先在 .onAppear 中切换动画,如下所示:

Text("Hello World")
  .offset(x: scrollText ? zeroPoint : screenEntryPoint)
  .animation(Animation.linear(duration: 8).repeatForever(autoreverses: false))    
  .onAppear 
    self.scrollText.toggle()
  

如果您随后将计时器设置为 10 秒以切换滚动文本,您将能够让动画运行 8 秒,暂停 2 秒,然后再次运行。

请注意,要使选取框文本起作用,您还需要重复文本两次,以便文本从右侧进入动画,同时从左侧离开。祝你好运!

【讨论】:

谢谢,我已经找到解决方案了。 reddit.com/r/SwiftUI/comments/ettnux/marquee_scrolling_text/…

以上是关于html滚动文本框的主要内容,如果未能解决你的问题,请参考以下文章

下拉滚动协议文本框展示样式(不可删除文本内容)

如何在网页的文本框中加滚动条

JS/JAVASCRIPT 选中文本框内的文字 让滚动条滚动到选中文字的位置

在文本框上滑动时,iPhone滚动错误

自动滚动文本框到底部

文本框中显示 <marquee/> 不滚动