JS-文字上下滚动（多行停顿）

代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body><style type="text/css">
* { margin:0; padding:0; font-size:12px; }
#scrollBox
{
width:400px;
height:40px;
line-height:20px;
overflow:hidden;
margin:10px;
}
#scrollBox2
{
width:400px;
height:80px;
line-height:20px;
overflow:hidden;
margin:10px;
}</style>
<p> </p>
<p>每屏两行：</p>
<div id="scrollBox">
<ul><li><a href="http://www.cookseo.com/article/web/29.htm" target="_blank">ASP.NET 是.NET FrameWork的一部分</a></li><li><a href="http://www.cookseo.com/article/css/126.htm" target="_blank">是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术</a></li><li><a href="http://www.cookseo.com/article/soft/125.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/css/2.htm" target="_blank">ASP.NET 是.NET FrameWork的一部分</a> </li>
</ul>
</div>
<p>每屏四行：</p>
<div id="scrollBox2">
<ul><li><a href="http://www.cookseo.com/article/soft/5.htm" target="_blank">ASP.NET 是.NET FrameWork的一部分</a></li><li><a href="http://www.cookseo.com/article/css/35.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/web/88.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/css/2.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/soft/71.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/soft/9.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/web/53.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/web/124.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/seo/32.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/web/29.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/css/126.htm" target="_blank">是一项微软公司的技术</a></li><li><a href="http://www.cookseo.com/article/soft/125.htm" target="_blank">是一项微软公司的技术</a> </li>
</ul>
</div>
<script type="text/javascript">function Dron_ScrollBox(uid) {this.scrollBox = document.getElementById(uid);this.scrollBoxHeight = this.scrollBox.clientHeight;this.scrollBoxInner = this.scrollBox.innerHTML;this.scrollCol = this.scrolln = 0;this.setScroll = function () {this.scrollBox.scrollTop = this.scrollCol + this.scrolln;if (this.scrolln == this.scrollBoxHeight)return this.addScroll()elsethis.scrolln++;var o = this;function m() { o.setScroll(); }setTimeout(m, 40);}this.addScroll = function () {this.scrollBox.innerHTML += "<br />" + this.scrollBoxInner;this.scrollCol = this.scrollBox.scrollTop;this.scrolln = 0;var o = this;function m() { o.setScroll(); }setTimeout(m, 2000);}this.init = this.addScroll;}//类的调用方法，可多个new Dron_ScrollBox("scrollBox").init();new Dron_ScrollBox("scrollBox2").init();
</script>
</body>
</html>

效果如图：

JS-文字上下滚动（多行停顿）相关推荐

android 跑马灯停顿,JS跑马灯滚动每行中间有停顿
setInterval(function() { //隐藏报表块REPORT0的滚动条 $("div[widgetname=REPORT0]").find(".froze ...
php文字左右滚动代码,JavaScript
js文字横向滚动特效本文为大家分享了js文字横向滚动特效代码,具体实现内容如下: 页面布局恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793 ...
jquery实现多行文字图片滚动效果
基于jquery的实现多行文字图片滚动的效果代码,如果我们在论坛公告等等这些实例了,下面我来给各位朋友介绍介绍. 1 <div id="scrollDiv"> 2 &l ...
html页面加文字横向滚动,js实现文字横向滚动
页面布局恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励 ...
原生JS实现公告栏文字横向滚动(通告栏)
在做APP公告滚动的时候用到,感觉还不错,码了转载地址:https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit ...
html公告栏设计,原生JS实现公告栏文字横向滚动(通告栏)
在做APP公告滚动的时候用到,感觉还不错,码了转载地址:https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit ...
js文字无限循环向上滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
原生JS实现公告栏文字向上滚动
HTML代码: <div id="top_message"><span style="font-size:19px; position:absolute ...
js实现文字横向滚动与纵向滚动(支持手动滑动距离)
js实现横向滚动 1.布局 <div id="scroll_div" class="fl"> <div id="scroll_beg ...
jQuery实现文字向上滚动
在一些网页中,我们会看到有一行或多行文字向上滚动,就像轮播一样.那我们如何实现它呢,现在就开始吧! 单行文字 html代码 <div id="scrollDiv"> & ...

JS-文字上下滚动（多行停顿）

JS-文字上下滚动（多行停顿）相关推荐

最新文章

热门文章