效果可见
scroll.html
this.init = function()//初始化滚动内容
{
/* alert(this.mTemplayer.offsetHeight+":"+this.mMarqueesHeight);
this.mTemplayer.innerHTML+=this.mOjb.innerHTML;
alert(this.mTemplayer.offsetHeight+":"+this.mMarqueesHeight);
this.mTemplayer.innerHTML+=this.mOjb.innerHTML;
alert(this.mTemplayer.offsetHeight+":"+this.mMarqueesHeight);
*/
var tmp_height = this.mTemplayer.offsetHeight;
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(this.mTemplayer.offsetHeight<this.mMarqueesHeight)
{
this.mTemplayer.innerHTML+=this.mOjb.innerHTML;
if(this.mTemplayer.offsetHeight == tmp_height) //如果高度没变化。直接退出,以防死循环
break;
} //把"templayer"的内容的“两倍”复制回原内容区:
this.mOjb.innerHTML=this.mTemplayer.innerHTML+this.mTemplayer.innerHTML;
}
this.scrollUp = function(pixelToScroll)//滚动条的驱动函数
{
if(this.mBlStopScroll==true) return; //如果变量"stopscroll"为真,则停止滚动
this.mPreTop=this.mOjb.scrollTop; //记录滚动前的滚动条位置
this.mOjb.scrollTop+=pixelToScroll; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(this.mPreTop==this.mOjb.scrollTop){
this.mOjb.scrollTop=this.mTemplayer.offsetHeight-this.mMarqueesHeight+1;
}
}
this.start(); //直接启动
setInterval(this.mClassName+".scrollUp("+this.mPixelToScroll+")",this.mTimeToScroll);
}
11111111111111
22222222222222
33333333333333
44444444444444
55555555555555
22222222222222
33333333333333
44444444444444
55555555555555
a11111111111111
a22222222222222
a33333333333333
a44444444444444
a55555555555555
a22222222222222
a33333333333333
a44444444444444
a55555555555555
b11111111111111
b22222222222222
b33333333333333
b44444444444444
b55555555555555
b22222222222222
b33333333333333
b44444444444444
b55555555555555
c11111111111111
c22222222222222
c33333333333333
c44444444444444
c55555555555555
c22222222222222
c33333333333333
c44444444444444
c55555555555555
<div id="marquees"><!-- 这些是字幕的内容,你可以任意定义 -->11111111111111<br />22222222222222<br />33333333333333<br />44444444444444
<br />55555555555555<br /><!-- 字幕内容结束 --></div>
<br />
<div id="marquees1">a11111111111111<br />
<br />
<div id="marquees1">a11111111111111<br />
a22222222222222<br />a33333333333333<br />
a44444444444444<br />a55555555555555<br /></div>
<br />
<div id="marquees2">b11111111111111<br />b22222222222222
<br />
<div id="marquees2">b11111111111111<br />b22222222222222
<br />b33333333333333<br />b44444444444444<br />b55555555555555<br /></div>
<br />
<div id="marquees3">c11111111111111<br />c22222222222222
<br />
<div id="marquees3">c11111111111111<br />c22222222222222
<br />c33333333333333<br />c44444444444444<br />c55555555555555<br /></div>
<SCRIPT language=javascript>
<!--
<SCRIPT language=javascript>
<!--
/**
* Scroll js 不间断滚动代码,可支持N多个同时滚动 :) test QQ:632519 web:ynjob.net 改进于网上共享代码
*
* @param string ClassName 当前new 生成的类名 不清楚jsp能否有函数得到该名称.目录只能用传递参数来解决,很是别扭
* @param string divObj div id="编号" 指定这里的编号 字符
* @param int marqueesHeight 内容区高度
* @param int timeToScroll 设定多少时间滚动一次
* @param int pixelToScroll 每次滚动条向下移动几个像素 与以上参数一样控制滚动速度
* Exp: var tmpObj=new Scroll("tmpObj",marquees,50,20,1);
* 2006-4-20 14:38
* @version 1.0.0
*/
* Scroll js 不间断滚动代码,可支持N多个同时滚动 :) test QQ:632519 web:ynjob.net 改进于网上共享代码
*
* @param string ClassName 当前new 生成的类名 不清楚jsp能否有函数得到该名称.目录只能用传递参数来解决,很是别扭
* @param string divObj div id="编号" 指定这里的编号 字符
* @param int marqueesHeight 内容区高度
* @param int timeToScroll 设定多少时间滚动一次
* @param int pixelToScroll 每次滚动条向下移动几个像素 与以上参数一样控制滚动速度
* Exp: var tmpObj=new Scroll("tmpObj",marquees,50,20,1);
* 2006-4-20 14:38
* @version 1.0.0
*/
function Scroll(ClassName,divObj,marqueesHeight,timeToScroll,pixelToScroll)
{
this.mOjb = divObj; //指定要滚动的对像
this.mBlStopScroll = false; //这个变量控制是否停止滚动
this.mPreTop = 0; //这个变量用于判断滚动条是否已经到了尽头
{
this.mOjb = divObj; //指定要滚动的对像
this.mBlStopScroll = false; //这个变量控制是否停止滚动
this.mPreTop = 0; //这个变量用于判断滚动条是否已经到了尽头
this.mTimeToScroll = timeToScroll; //设定多少时间滚动一次
this.mMarqueesHeight = marqueesHeight; //内容区高度
this.mMarqueesHeight = marqueesHeight; //内容区高度
this.mTemplayer = null; //不可见的层的ID名字
this.mClassName = ClassName; //当前new 生成的类名
this.mPixelToScroll = pixelToScroll; //每次滚动条向下移动几个像素
this.mClassName = ClassName; //当前new 生成的类名
this.mPixelToScroll = pixelToScroll; //每次滚动条向下移动几个像素
this.SetStop = function(isScrolled)//设定是否滚动
{
this.mBlStopScroll=isScrolled;
}
this.start = function() //开始运行
{
with(this.mOjb)
{
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=this.mMarqueesHeight;
style.overflowY="hidden"; //滚动条不可见 hidden scroll
οnmοuseοver=new Function(this.mClassName+".SetStop(true)"); //鼠标经过,停止滚动
οnmοuseοut=new Function(this.mClassName+".SetStop(false)"); //鼠标离开,开始滚动
}
var tmp_id ="templayer"+this.mClassName;
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:让每次生成div ID都不一样.防止冲突
document.write('<div id="'+tmp_id+'" style="position:absolute;z-index:1;visibility:hidden"></div>');
this.mTemplayer=document.getElementById(tmp_id); //将得到随机生成的mTemplayer对像 并保存
this.init();
}
{
this.mBlStopScroll=isScrolled;
}
this.start = function() //开始运行
{
with(this.mOjb)
{
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=this.mMarqueesHeight;
style.overflowY="hidden"; //滚动条不可见 hidden scroll
οnmοuseοver=new Function(this.mClassName+".SetStop(true)"); //鼠标经过,停止滚动
οnmοuseοut=new Function(this.mClassName+".SetStop(false)"); //鼠标离开,开始滚动
}
var tmp_id ="templayer"+this.mClassName;
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:让每次生成div ID都不一样.防止冲突
document.write('<div id="'+tmp_id+'" style="position:absolute;z-index:1;visibility:hidden"></div>');
this.mTemplayer=document.getElementById(tmp_id); //将得到随机生成的mTemplayer对像 并保存
this.init();
}
this.init = function()//初始化滚动内容
{
/* alert(this.mTemplayer.offsetHeight+":"+this.mMarqueesHeight);
this.mTemplayer.innerHTML+=this.mOjb.innerHTML;
alert(this.mTemplayer.offsetHeight+":"+this.mMarqueesHeight);
this.mTemplayer.innerHTML+=this.mOjb.innerHTML;
alert(this.mTemplayer.offsetHeight+":"+this.mMarqueesHeight);
*/
var tmp_height = this.mTemplayer.offsetHeight;
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(this.mTemplayer.offsetHeight<this.mMarqueesHeight)
{
this.mTemplayer.innerHTML+=this.mOjb.innerHTML;
if(this.mTemplayer.offsetHeight == tmp_height) //如果高度没变化。直接退出,以防死循环
break;
} //把"templayer"的内容的“两倍”复制回原内容区:
this.mOjb.innerHTML=this.mTemplayer.innerHTML+this.mTemplayer.innerHTML;
}
this.scrollUp = function(pixelToScroll)//滚动条的驱动函数
{
if(this.mBlStopScroll==true) return; //如果变量"stopscroll"为真,则停止滚动
this.mPreTop=this.mOjb.scrollTop; //记录滚动前的滚动条位置
this.mOjb.scrollTop+=pixelToScroll; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(this.mPreTop==this.mOjb.scrollTop){
this.mOjb.scrollTop=this.mTemplayer.offsetHeight-this.mMarqueesHeight+1;
}
}
this.start(); //直接启动
setInterval(this.mClassName+".scrollUp("+this.mPixelToScroll+")",this.mTimeToScroll);
}
//* 以下为调用代码
var tmpObj=new Scroll("tmpObj",marquees,50,50,1);
var tmpObj1=new Scroll("tmpObj1",marquees1,100,100,5);
var tmpObj2=new Scroll("tmpObj2",marquees2,150,150,10);
var tmpObj3=new Scroll("tmpObj3",marquees3,200,1000,200);
var tmpObj1=new Scroll("tmpObj1",marquees1,100,100,5);
var tmpObj2=new Scroll("tmpObj2",marquees2,150,150,10);
var tmpObj3=new Scroll("tmpObj3",marquees3,200,1000,200);
//*/
-->
</script>
<script language=javascript>
</script>
-->
</script>