html纵向字幕无缝滚动,html文字无缝滚动代码

这篇文章主要为大家详细介绍了html文字无缝滚动代码，具有一定的参考价值，可以用来参考一下。

实例一：

经测试代码如下：

滚动板

body { font: 12px/1 "宋体", SimSun, serif; background:#fff; color:#000; }

.scrollUl { overflow:hidden; position:relative; }

#scrollUlTest1 {height:80px;}

#scrollUlTest2 {height:120px;}

.scrollUl ul, .scrollUl li { margin:0; padding:0; list-style:none outside; }

.scrollUl ul { position:absolute; }

.scrollUl li { height:20px; }

// containerId 滚动板外层节点的 ID

// numViews 分几屏滚动，需要滚动显示的总行数应该是分屏数的整倍数。

// showTime 每屏固定住时显示的时间，单位毫秒

// scrollTime 每次滚动一屏用的时间，单位毫秒

var ScrollUl=function(containerId, numViews, showTime, scrollTime) {

//定时器变量，因为有移到层上时停止滚动的事件处理，而那时可能还没开始定时器呢，所以先把这个变量声明出来。

this.timer=null;

this.numViews = numViews;

this.showTime = showTime;

this.scrollTime = scrollTime;

this.container = document.getElementById(containerId);

var ulChild = this.container.getElementsByTagName('ul');

var ul = ulChild[0];

//ul 是未使用 CSS 明确指定高度的，IE 中用 realstyle 取不到高度，只能得到 auto，而 getBoundingClientRect() 是 IE 和 FF 都支持的方式。

var rect = ul.getBoundingClientRect();

var heightAll = rect.bottom - rect.top;

var heightView = heightAll / this.numViews;

var msPerPx = this.scrollTime /