<html>
<head>
<title>js特效无缝向上连续滚动效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
<!--
#nli_con {
height: 212px;
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>
<!--把下面代码加到<body>与</body>之间-->
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="400" height="212">
<div id="nli_con">
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>1、中国WEB第一站?</strong></a></dt>
<dd>,JS无缝垂直图片滚动,效果非常不错...图片特效 >>> JS无缝垂直图片滚动,效果非常不错 JS无缝垂直图片滚动,效果非常不错</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>2、网页制作教程?</strong></a></dt>
<dd>从右向左滚动JavaScript图片滚动,看了一下代码,好像这方法挺简便的,容易修改,滚动无空隙,循环连续...图片特效向上无缝滚动的图片效果使一组图上无缝向上滚动的效果,用CSS定义滚动区域的大小与图片正好重叠</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>3、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>4、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>5、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>6、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>7、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
</div>
</td>
</tr>
<tr><td height="20"></td></tr>
<!-- 第二个滚动效果 -->
<tr>
<td width="400" height="212">
<div id="nli_con">
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>1、中国WEB第一站?</strong></a></dt>
<dd>,JS无缝垂直图片滚动,效果非常不错...图片特效 >>> JS无缝垂直图片滚动,效果非常不错 JS无缝垂直图片滚动,效果非常不错</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>2、网页制作教程?</strong></a></dt>
<dd>从右向左滚动JavaScript图片滚动,看了一下代码,好像这方法挺简便的,容易修改,滚动无空隙,循环连续...图片特效向上无缝滚动的图片效果使一组图上无缝向上滚动的效果,用CSS定义滚动区域的大小与图片正好重叠</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>3、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>4、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>5、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>6、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>7、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
</div>
</td>
</tr>
</table></body>
</html>
<head>
<title>js特效无缝向上连续滚动效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
<!--
#nli_con {
height: 212px;
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>
<!--把下面代码加到<body>与</body>之间-->
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="400" height="212">
<div id="nli_con">
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>1、中国WEB第一站?</strong></a></dt>
<dd>,JS无缝垂直图片滚动,效果非常不错...图片特效 >>> JS无缝垂直图片滚动,效果非常不错 JS无缝垂直图片滚动,效果非常不错</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>2、网页制作教程?</strong></a></dt>
<dd>从右向左滚动JavaScript图片滚动,看了一下代码,好像这方法挺简便的,容易修改,滚动无空隙,循环连续...图片特效向上无缝滚动的图片效果使一组图上无缝向上滚动的效果,用CSS定义滚动区域的大小与图片正好重叠</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>3、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>4、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>5、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>6、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>7、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
</div>
</td>
</tr>
<tr><td height="20"></td></tr>
<!-- 第二个滚动效果 -->
<tr>
<td width="400" height="212">
<div id="nli_con">
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>1、中国WEB第一站?</strong></a></dt>
<dd>,JS无缝垂直图片滚动,效果非常不错...图片特效 >>> JS无缝垂直图片滚动,效果非常不错 JS无缝垂直图片滚动,效果非常不错</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>2、网页制作教程?</strong></a></dt>
<dd>从右向左滚动JavaScript图片滚动,看了一下代码,好像这方法挺简便的,容易修改,滚动无空隙,循环连续...图片特效向上无缝滚动的图片效果使一组图上无缝向上滚动的效果,用CSS定义滚动区域的大小与图片正好重叠</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>3、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>4、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>5、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>6、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
<dl>
<dt><a href="http://www.abc.cn" target="_blank"><strong>7、为什么要建立网站标准?什么是网站标准?</strong></a></dt>
<dd>我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站,例如1996-1999年典型的……</dd>
</dl>
</div>
</td>
</tr>
</table></body>
</html>
#nli_con1 {
height: 212px;
width: 400px;
overflow: hidden;
border: 1px solid #999999;
}把第二个nli_con改成nli_con1
再加个 marquee1 = new Marquee("nli_con1","marquee1",1,2);