您的位置：首页 > Web前端 > JavaScript

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

2015-09-09 14:16 531 查看

代码如下：

<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()
else
this.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>

效果如图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航