无缝滚动字幕

无缝滚动字幕
作者：Neoxone 发表时间： 2009年12月29号，星期二阅读：5,054 次

<style>
	*{padding:0;margin:0;font-size:12px;}
	#wrap{width:300px;background:#eee;}
	#wrap li{height:22px;line-height:22px;}
</style>
<div id="wrap" style="overflow:hidden;height:100px;">  <!--  height值一定要比box1的offsetHeight(亦即box2的offsetTop)要小 -->
	<ul id="box1">
		<li>1 <a href="#" title="信息公开工作">信息公开工作</a></li>
		<li>2 <a href="#" title="信息公开工作">国务院办公厅转发监察部等部门 </a></li>
		<li>3 <a href="#" title="信息公开工作">我市将严查损害发展环境问题</a></li>
		<li>4 <a href="#" title="办公时间调整通知">办公时间调整通知</a></li>
		<li>5 <a href="#" title="办公时间调整通知">办公时间调整通知d</a></li>
	</ul>
	<ul id="box2"></ul>
</div>
<!-- 无他，放参考值尔 -->
<div id="refer">
</div>
<script type="text/javascript">
		var $id=function(id){return document.getElementById(id);}
		var wrap=$id('wrap'),box1=$id('box1'),box2=$id('box2'),speed=50;
		box2.innerHTML=box1.innerHTML;
		function roll(){
			//判读是否滚动到了第二部分的顶部位置
			(box2.offsetTop-wrap.scrollTop<=0) ? wrap.scrollTop-=box1.offsetHeight : wrap.scrollTop++;
			$id('refer').innerHTML=box2.offsetTop+' '+wrap.offsetHeight+' '+wrap.scrollTop; //无他，参考值尔
		}
		var start=setInterval(roll,speed);
		$id('wrap').onmouseover=function() {clearInterval(start)};
		$id('wrap').onmouseout=function() {start=setInterval(roll,speed)};
</script>

先看看无缝滚动的效果，使用window的setInterval方法重复调用一个滚动函数。
关键的代码是

function roll(){
//判读是否滚动到了第二部分的顶部位置
(box2.offsetTop-wrap.scrollTop<=0) ? wrap.scrollTop-=box1.offsetHeight : wrap.scrollTop++;
$id('refer').innerHTML=box2.offsetTop+' '+wrap.offsetHeight+' '+wrap.scrollTop; //无他，参考值尔
}
var start=setInterval(roll,speed);

而无缝的关键还在这里

box2.innerHTML=box1.innerHTML; //拷贝一份内容跟随其后，使原内容之后还有内容

我原本要做的效果并非全如上面，我需要的效果是：单条为一步阶，进行间歇性循环无缝滚动。

其实提起滚动，应该立马会想起走马灯（marquee）。尽管对其一直有偏见，但我还是会给他个机会的。。。

<style>
	*{padding:0;margin:0;}
	#quee li{height:30px;line-height:30px;}
</style>
<div style="border:1px solid #ccc;">
	<marquee id="quee" direction=up scrollamount="3"scrolldelay="0" style="height:30px;" >
	<ul>
		<li><a href="#">1两会会谈在即陈云 抵台 台湾警方加强维安。(09-09:15)</a></li>
		<li><a href="#">2两会会谈在即陈云 抵台 台湾警方加强维安。(09-09:15)</a></li>
		<li><a href="#">3两会会谈在即陈云 抵台 台湾警方加强维安。(09-09:15)</a></li>
		<li><a href="#">4两会会谈在即陈云 抵台 台湾警方加强维安。(09-09:15)</a></li>
		<li><a href="#">5两会会谈在即陈云 抵台 台湾警方加强维安。(09-09:15)</a></li>
		<li><a href="#">6两会会谈在即陈云 抵台 台湾警方加强维安。(09-09:15)</a></li>
	</ul>
	</marquee>
</div>
<!-- -->
<div id="cc"></div>
 <script type="text/javascript">
	var $$=function(id){return document.getElementById(id);}
	var quee=document.getElementById('quee');
	setTimeout(func,1000);
	function func(){
		$$('quee').stop();
		setTimeout(func2,1000);
		$$('cc').innerHTML=$$('quee').scrollTop;  //参考值
	}
	function func2(){
		$$('quee').start();
		setTimeout(func,1000);
	}
 </script>

function func(){
$$('quee').stop();
setTimeout(func2,1000);
}
function func2(){
$$('quee').start();
setTimeout(func,1000);
}

延时1秒交叉调用marquee的内置函数start()和stop();

不过，scrollamount影响的步阶不准确啊，而且不能做到无缝么。好，将marquee拖出去斩了（marquee:冤枉啊~~~~~）

下面是新的做法

<style>
	*{padding:0;margin:0;}
	#wrap li{height:30px;line-height:30px;}
</style>
<div id="wrap" style="height:30px;overflow:hidden;background:#eee" >  <!-- 注意这里的高度值要匹配 -->
	<ul id="box1">
		<li><a href="#">1两会会谈在即陈抵台 台湾警方加强维安。(09-09:15)</a></li>
		<li><a href="#">2两会会谈在即a抵台 台湾警方加强维安。(09-09:15)</a></li>
		<li><a href="#">3两会会谈在即s抵台 台湾警方加强维安。(09-09:15)</a></li>
	</ul>
	<ul id="box2">
	</ul>
</div>
 <div id="refer"> </div>
 <script type="text/javascript">
	var $id=function(id){return document.getElementById(id) || id;}
	var wrap=$id('wrap'),box1=$id('box1'),box2=$id('box2'),refer=$id('refer');
	box2.innerHTML=box1.innerHTML;
	function roll(){
		wrap.scrollTop++;
		refer.innerHTML=wrap.scrollTop;   //无用，纯粹做参考数值
		if(box1.offsetHeight-wrap.scrollTop>0){  //尚未滚动到第二部分的顶部位置时
			 if(wrap.scrollTop % wrap.offsetHeight != 0)
			 {
				return(setTimeout(roll,20));	 //20毫秒即递归一次
			 }
			 else{						//当滚动的累计距离达到显示域高度的倍数时
				return(setTimeout(roll,2000));  //等待2秒才递归调用
			 }
		 }
		 else{ setTimeout(function(){wrap.scrollTop=0;roll()},2000); }
	}
	setTimeout(roll,2000)
 </script>

function roll(){
wrap.scrollTop++;
if(box1.offsetHeight-wrap.scrollTop>0){ //尚未滚动到第二部分的顶部位置时
if(wrap.scrollTop % wrap.offsetHeight != 0)
{
return(setTimeout(roll,20)); //20毫秒即递归一次
}
else{ //当滚动的累计距离达到显示域高度的倍数时
return(setTimeout(roll,2000)); //等待2秒才递归调用
}
}
else{ setTimeout(function(){wrap.scrollTop=0;roll()},2000); }
}

运用递归，而没有用setInterval

下面写成一个类，方便实例化调用

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{padding:0;margin:0;}
 .item{overflow:hidden;zoom:1;position:relative;}
.showBox {height:50px;width:50px;overflow:hidden;float:left;}
.showBox li{height:50px;line-height:50px;font-size:42px;}
</style>
</head>
<body>
<div class="item">
	<div class="showBox">
		<ul class="RollList">
			<li >0</li>
			<li >1</li>
			<li >2</li>
			<li >3</li>
			<li >4</li>
			<li >5</li>
			<li >6</li>
			<li >7</li>
			<li >8</li>
			<li >9</li>
		</ul>
	</div>
	<div class="showBox">
		<ul class="RollList">
			<li >0</li>
			<li >1</li>
			<li >2</li>
			<li >3</li>
			<li >4</li>
			<li >5</li>
			<li >6</li>
			<li >7</li>
			<li >8</li>
			<li >9</li>
		</ul>
	</div>
	<div class="showBox">
		<ul class="RollList">
			<li >0</li>
			<li >1</li>
			<li >2</li>
			<li >3</li>
			<li >4</li>
			<li >5</li>
			<li >6</li>
			<li >7</li>
			<li >8</li>
			<li >9</li>
		</ul>
	</div>
</div>
<div class="item">
	<div class="showBox">
		<ul class="RollList">
			<li >0</li>
			<li >1</li>
			<li >2</li>
			<li >3</li>
			<li >4</li>
			<li >5</li>
			<li >6</li>
			<li >7</li>
			<li >8</li>
			<li >9</li>
		</ul>
	</div>
	<div class="showBox">
		<ul class="RollList">
			<li >0</li>
			<li >1</li>
			<li >2</li>
			<li >3</li>
			<li >4</li>
			<li >5</li>
			<li >6</li>
			<li >7</li>
			<li >8</li>
			<li >9</li>
		</ul>
	</div>
	<div class="showBox">
		<ul class="RollList">
			<li >0</li>
			<li >1</li>
			<li >2</li>
			<li >3</li>
			<li >4</li>
			<li >5</li>
			<li >6</li>
			<li >7</li>
			<li >8</li>
			<li >9</li>
		</ul>
	</div>
</div>
<div class="item">
	<div class="showBox">
		<ul class="RollList">
			<li >0</li>
			<li >1</li>
			<li >2</li>
			<li >3</li>
			<li >4</li>
			<li >5</li>
			<li >6</li>
			<li >7</li>
			<li >8</li>
			<li >9</li>
		</ul>
	</div>
	<div class="showBox">
		<ul class="RollList">
			<li >0</li>
			<li >1</li>
			<li >2</li>
			<li >3</li>
			<li >4</li>
			<li >5</li>
			<li >6</li>
			<li >7</li>
			<li >8</li>
			<li >9</li>
		</ul>
	</div>
	<div class="showBox">
		<ul class="RollList">
			<li >0</li>
			<li >1</li>
			<li >2</li>
			<li >3</li>
			<li >4</li>
			<li >5</li>
			<li >6</li>
			<li >7</li>
			<li >8</li>
			<li >9</li>
		</ul>
	</div>
</div>
</body>
<script>
var $id = function(o){ return document.getElementById(o) || o;}
/* 通用的getElementsByClassName方法 */
var getElementsByClassName = function(className,parent,tag) {
	parent = parent || document;
    if(parent.getElementsByClassName){
        return  parent.getElementsByClassName(className)
    }else{
        tag = tag || '*';
        var returnElements = []
        var els =  parent.getElementsByTagName(tag);
        className = className.replace(/\-/g, "\\-");
        var pattern = new RegExp("(^|\\s)"+className+"(\\s|$)");
		var i = 0;
        while(i < els.length){
            if (pattern.test(els[i].className) ) {
                returnElements.push(els[i]);
            }
			i++;
        }
        return returnElements;
    }
}
/* 为了获取display:none元素的offsetHeight */
var getHeight = function(elem){
	if(elem.offsetWidth !== 0){
		return elem.offsetHeight;
	}
	var temp = 0;
	var old = {};
	var options = { position: "absolute", visibility: "hidden", display:"block" }
	for ( var name in options ) {
		old[ name ] = elem.style[ name ];
		elem.style[ name ] = options[ name ];
	}
	temp = elem.offsetHeight;
	for ( var name in options ) {
		elem.style[ name ] = old[ name ];
	}
	return temp;
};
function Roll(obj){
	var self = this;
	this.wrap = obj.box;
	this.interval = obj.interval || 1000; //滚动间歇
	this.volume = obj.volume || 1; //滚动最小像素
	this.time = 100/obj.speed || 10; //滚动速度
	this.list = getElementsByClassName('RollList',this.wrap)[0];
	this.children = this.list.children;
	this.init = function(){
		if(this.children.length == 0) return false; /* 没有滚动列,不滚动*/
		this.row = obj.row || getHeight(this.wrap)/getHeight(this.children[0]) | 0;  //设置每次滚动的列数，默认为显示区域内的列数
		if(this.children.length < this.row) return false; /* 滚动列数太少 ,不滚动*/
		/* 复制一份内容，达到无缝滚动 */
		if(this.wrap.insertAdjacentHTML){
			this.wrap.insertAdjacentHTML('beforeEnd',this.wrap.innerHTML);
		}else{
			/* 因为FF8以前不支持insertAdjacentHTML，用innerHTML就显得有点复杂了。。。 */
			this.wrap.innerHTML += this.wrap.innerHTML;
			this.list = getElementsByClassName('RollList',this.wrap)[0];
			this.children = this.list.children;
		}
		this.timeOpt = setTimeout(this.move,this.interval);
	};
	this.move=function(){
		if(self.list.offsetHeight - self.wrap.scrollTop >= self.volume){
			self.wrap.scrollTop += self.volume;
			 if(self.wrap.scrollTop % (self.row * self.children[0].offsetHeight) >= self.volume)
			 {
				return(self.timeOpt = setTimeout(self.move,self.time));
			 }
			 else{
				return(self.timeOpt = setTimeout(self.move,self.interval));
			 }
		}else{
			self.timeOpt = setTimeout(function(){
			 	self.wrap.scrollTop = 0;
			 	self.move()
			 },self.interval);
		 };
	};
	this.init();
};
/* 实例化 */
var lists = getElementsByClassName("showBox");
for (var i = 0; i < lists.length; i++){
	(function(i){
		setTimeout(function(){
			new Roll({box:lists[i],interval:300,volume:10});
		},i*200)
	})(i);
};
</script>