实现内容滚动

下面是两种实现内容滚动效果的实例，供大家参考指正

一、js控制

<div id=ov style="height:32px;overflow:hidden;">
			<div id=iv style="padding:32px 0px;">
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期一 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期二 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期三 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期四 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期五 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期六 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期日 ^_^
				</div>
			</div>
		</div>

 

 对应的js部分如下：

var i=null,ccc;
	var mf=function(o1,o2){
		this.oo=o1;this.oi=o2;this.pl=15;
		this.Me=this.Mf=i;this.lt=2E3;this.ah=100;
		this.Xz=0;this.Ki=3;this.zi=0
	};
	pt=mf.prototype;
	pt.start=function(){
		if(!this.Mf){
			var a=this;
			this.Mf=window.setInterval(function(){a.Ax()},this.lt)
		}
	};
	pt.stop=function(){
		if(this.Mf){
			window.clearInterval(this.Mf);
			this.Mf=i
		}
		if(this.Me){
			window.clearInterval(this.Me);
			this.Me=i
		}
	};
	pt.Pk=function(a){
		this.pl=a
	};
	pt.Ax=function(){
		if(!this.Me){
			this.zi=1;
			var a=this;
			this.Me=window.setInterval(function(){a.ci()},this.ah)
		}
	};
	pt.ci=function(){
		if(!this.rp()){
			this.Xz=0;this.rp()
		}
		++this.zi;
		if(this.zi>this.Ki){
			window.clearInterval(this.Me);
			this.Me=i;++this.Xz
		}
	};
	pt.rp=function(){
		var a=Math.round(this.pl*(this.Xz+this.zi/this.Ki));
		this.oo.scrollTop=a;
		return this.oo.scrollTop==a
	};
	var D=function(did){
		return document.getElementById(did)
	};
	var minit=function(k){
		var bb=k[0],cc=k[1];
		k=k[2];bb=D(bb);cc=D(cc);
		if(bb&&cc){
			ccc=new mf(bb,cc);ccc.Pk(k);ccc.start();
		}
	}
	window.onload=function(){
		var pms=["ov","iv","32"];minit(pms);
	}

 

 

二、marquee标签

 

<div>
	<MARQUEE scrollAmount=2 direction=up style="height:38px"
		onmouseover="this.setAttribute('scrollamount', 0, 0);"
		onmouseout="this.setAttribute('scrollamount', 2, 0);">
		<ul>
			<li style="margin:5px 0 0 5px;">
				今天是星期一 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期二 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期三 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期四 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期五 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期六 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期日 ^_^
			</li>
		</ul>
	</MARQUEE>
</div>

 

ps：下载附件即可看到效果.