文字成批滚动在指定区域内

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字成批滚动</title>
<style type="text/css">
<!--
#nli_con {
	height: 200px;
	width: 400px;
	overflow: hidden;
	border: 1px solid #999999;
}
div,dl,dt,dd {
	margin: 0px;
	padding: 0px;
}
dl {
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	font-size: 14px;
	margin-right: 10px;
	margin-left: 10px;
}
dd {
	font-size: 12px;
}
-->
</style>
<script language="javascript">
var $ = function (d){
    typeof d == "string" &&(d = document.getElementById(d)); 
    return $.fn.call(d);
};
$.fn = function (){//附加2个方法
	this.$ADD = function (fn){CLS.add(this,fn)};
	this.addEvent = function (sEventType,fnHandler){
		if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);} 
	    else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);} 
	    else {this["on" + sEventType] = fnHandler;}
	}
	this.removeEvent = function (sEventType,fnHandler){
		if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);} 
	    else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);} 
	    else { this["on" + sEventType] = null;}
	}
	return this;
};
var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};
var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}
var Marquee = Class.create();
Marquee.prototype = {
  initialize: function(id,name,out,speed) {
    this.name = name;
	this.box = $(id);
	this.out  = out;
	this.speed = speed;
	this.d = 1;
	this.box.style.position = "relative";
	this.box.scrollTop = 0;
	var _li = this.box.firstChild;
	while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling;
	this.lis = this.box.getElementsByTagName(_li.tagName);
	this.len = this.lis.length;	
	for(var i=0;i<this.lis.length;i++){//计算该复制多少节点，保证无缝滚动，没必要的就不复制
	    var __li = document.createElement(_li.tagName);
		__li.innerHTML = this.lis[i].innerHTML;
		this.box.appendChild(__li);
		if(this.lis[i].offsetTop>=this.box.offsetHeight)break;
	}
	this.Start();
	this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));
	this.box.addEvent("mouseout",Bind(this,this.Start,[]));
  },
  Start:function (){
	  clearTimeout(this.timeout);
	  this.timeout = setTimeout(this.name+".Up()",this.out*1000)
  },
  Up:function(){
	  clearInterval(this.interval);
	  this.interval = setInterval(this.name+".Fun()",10);
  },
  Fun:function (){
      this.box.scrollTop+=this.speed;
	  if(this.lis[this.d].offsetTop <= this.box.scrollTop){
	    clearInterval(this.interval);
		this.box.scrollTop = this.lis[this.d].offsetTop;
		this.Start();
		this.d++;
	  }
	  if(this.d >= this.len + 1){
	     this.d = 1;
	     this.box.scrollTop = 0;
	  }
  }
};
$(window).addEvent("load",function (){
  marquee = new Marquee("nli_con","marquee",1,2);//加载完后运行代码，
});
</script>
</head>
<body>
 <div id="nli_con">
 <dl>
   <dt><a href='/' target='_blank'><strong>1. 文字成批滚动？</strong></a></dt>
   <dd>这是一个很不错的效果，文字在指定区域内成批滚动...</dd>
 </dl>
 
 <dl>
   <dt><a href='/' target='_blank'><strong>2.你知道站长资源库吗？ </strong></a></dt>
   <dd>一个学习型为主的源代码资源站。</dd>
 </dl>
 
 <dl>
   <dt><a href='/' target='_blank'><strong>3. 网页特效是什么？</strong></a></dt>
   <dd> 网页特效是一种使用CSS结合JavaScript技术而编写的具有操作和视觉感都很不错的技术，我们为您提供特效样本...</dd>
 </dl>
 
 <dl>
   <dt><a href='/' target='_blank'><strong>4. 为什么要建立网站标准？</strong></a></dt>
   <dd>　 我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。</dd>
 </dl>
 
 <dl>
   <dt><a href='/' target='_blank'><strong>5. 企业网站建设须注意的10大问题</strong></a></dt>
   <dd> 企业网站已经成为一个企业互联网战略的基础，有人说:"10年以后，互联网业将消失。"...</dd>
 </dl>
 
 <dl>
   <dt><a href='/' target='_blank'><strong>6. 2009牛年，我们应该怎样发展网站？</strong></a></dt>
   <dd>　　选择定位，根据你的能力，工作量接受范围度等，制定一个框架性的简单的方案。最好能发挥自己的专长，自己是否有空余的大量时间...</dd>
 </dl>
</div>
</body>
</html>
上一个：可控的JavaScript文字轮番显示
下一个：JS控制链接的滚动
更多图片编程知识: