转载请保留本行链接:http://www.www.luoye.org/html/ 转载许可:署名-非商业性使用-相同方式共享

下面的JS代码另存为一个外部的JS文件里,在使用时,先引用该JS文件,再滚屏的HTML后添加JS脚本,声明一个JS滚屏对象就可以使用了

可实现上下左右四个方向不同的滚动效果

如另外为marquee.js

<script language="javascript" src="marquee.js"></script>
<div id="dv_Marquee">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"><img src="demo.jpg" width="400" height="200" /></th>
</tr>
<tr>
<td><img src="demo.jpg" width="400" height="200" /></td>
</tr>
</table>
</div>
<script language="javascript">
var _m = new Marquee("_m","dv_Marquee","up",1,1);//向上滚屏
</script>

dv_Marquee是一个定义了宽高,无填充,无边框,溢出设置为隐藏的一个块区域,无需要额外的marquee标记

如果横向滚动时,内容的实际宽度小于滚动区域宽度时,无滚动效果
纵向滚动与横向滚动一样

可实现四个方向的滚动方式

鼠标移上去,自动停止

鼠标移开,恢复滚动

//以下代码存储为外部JS文件

//JS模拟Marquee连续滚屏效果
//IE 6.0 测试通过
//FireFox 1.5.0.7 测试通过
//Opera 9.02 测试通过
//NetScape 8.1测试通过

//author:梦猫猫
//QQ:16991200
//Created:2006-10-18
//intro:
/*
instance:创建的实例名称
marquee:滚动区域容器的ID，要求无填充，无边框，overflow为hidden
direction:滚动方向，值分别为：up,down,left,right
delay:滚动的速度，值最小为1，值越小越快
amount:滚动步进量，值最小为1，值越大越快
*/

function Marquee(instance,marquee,direction,delay,amount){
this.instance =instance;//实例名称
this.marquee = document.getElementById(marquee);
this.delay = delay;
if(this.delay==null){
this.delay = 1;
}
this.amount = amount;
if(this.amount==null){
this.amount = 1;
}
this.direction = direction;
this.width = this.marquee.clientWidth;
this.height = this.marquee.clientHeight;
this.container = document.createElement("table");
this.container.border=0;
this.container.cellspacing="0"
this.container.cellpadding="0"
var _HTML = this.marquee.innerHTML;
this.marquee.innerHTML = "";
this.marquee.appendChild(this.container);
var _tr = this.container.insertRow(this.container.rows.length);
var _td = _tr.insertCell(_tr.cells.length);
_td.innerHTML = _HTML;
this.scrollHeight = this.container.clientHeight;
this.scrollWidth = this.container.clientWidth;
switch(this.direction.toLowerCase()){
case "up":
case "down":
if(this.scrollHeight>=this.height){
var _tr = this.container.insertRow(this.container.rows.length);
var _td = _tr.insertCell(_tr.cells.length);
_td.innerHTML = _HTML;
this.scrollHeight = this.container.clientHeight;
}
if(this.direction.toLowerCase()=="down"){
this.marquee.scrollTop=this.scrollHeight/2;
}
break;
default:
if(this.scrollWidth>=this.width){
var _td = _tr.insertCell(_tr.cells.length);
_td.innerHTML = _HTML;
this.scrollWidth = this.container.clientWidth;
}

}

this.marquee.m = this;

this.intervalId = null;
this.marquee.onmouseover = function (){
this.m.Stop();
}
this.marquee.onmouseout = function (){
this.m.Start();
}
this.Start();
}
Marquee.prototype.Start = function (){
this.intervalId = setInterval(this.instance+".Scroll()",this.delay)
//this.Scroll();
}
Marquee.prototype.Stop = function (sender){
if(this.intervalId!=null){
clearInterval(this.intervalId);
}
}
Marquee.prototype.Scroll = function (){
switch(this.direction.toLowerCase()){
case "up":
if((this.marquee.scrollTop+this.height)>=this.scrollHeight){
this.marquee.scrollTop-=this.scrollHeight/2
}
if(this.scrollHeight>this.height){
this.marquee.scrollTop+=this.amount;
}
break;
case "down":
if(this.marquee.scrollTop<=0){
this.marquee.scrollTop+=this.scrollHeight/2
}
if(this.scrollHeight>this.height){
this.marquee.scrollTop-=this.amount;
}
break;
case "right":
if(this.marquee.scrollLeft<=0){
this.marquee.scrollLeft+=this.scrollWidth/2
}
if(this.scrollWidth>this.width){
this.marquee.scrollLeft-=this.amount;
}
break;
default:
if((this.marquee.scrollLeft+this.width)>=this.scrollWidth){
this.marquee.scrollLeft-=this.scrollWidth/2
}
if(this.scrollWidth>this.width){
this.marquee.scrollLeft+=this.amount;
}
}
}
//以上为外部JS代码