Marquee替代 -- 无间滚动[IE6-7, FF, OP...]

2008-10-3 23:51:30　来源: 网络　作者:站长　访问：239 次　被顶：8 次　字号：【大中小】

HTML代码

<SCRIPT language=javascript type=text/javascript>
//<!--
/*******************************************
- Marquee 替代 -- 无间滚动
- By Mudoo 2008.8
- http://hi.baidu.com/mt20
********************************************
new Marquee({
obj : 'myMarquee', // 滚动对象（必须）
name : 'MyMQ_1', // 实例名（可选，不指定则随机）
mode : 'x', // 滚动模式（可选，x=水平, y=垂直，默认x）
speed : 10, // 滚动速度（可选，越小速度越快，默认10）
autoStart : true, // 自动开始（可选，默认True）
movePause : true // 鼠标经过是否暂停（可选，默认True）
});
********************************************/
var MyMarquees = new Array();
// 获取检测实例名
function getMyMQName(mName) {
var name = mName==undefined ? RandStr(5) : mName;
var myNames = ','+ MyMarquees.join(',') +',';

while(myNames.indexOf(','+ name +',')!=-1) {
name = RandStr(5);
}
return name;
}
function Marquee(inits) {
var _o = this;
var _i = inits;

if(_i.obj==undefined) return;
_o.mode = _i.mode==undefined ? 'x' : _i.mode; // 滚动模式(x:横向, y:纵向)
_o.mName = getMyMQName(_i.name); // 实例名
_o.mObj = $(_i.obj); // 滚动对象
_o.speed = _i.speed==undefined ? 10 : _i.speed; // 滚动速度
_o.autoStart= _i.autoStart==undefined ? true : _i.autoStart;// 自动开始
_o.movePause= _i.movePause==undefined ? true : _i.movePause;// 鼠标经过是否暂停

_o.mDo = null; // 计时器
_o.pause = false; // 暂停状态

// 无间滚动初始化
_o.init = function() {
if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') || (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return;

MyMarquees.push(_o.mName);

// 克隆滚动内容
_o.mObj.innerHTML = _o.mode=='x' ? (
'<table width="100%" border="0" align="left" cellpadding="0" cellspace="0">'+
' <tr>'+
' <td id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</td>'+
' <td id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</td>'+
' </tr>'+
'</table>'
) : (
'<div id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</div>'+
'<div id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</div>'
);

// 获取对象、高宽
_o.mObj1 = $('MYMQ_'+ _o.mName +'_1');
_o.mObj2 = $('MYMQ_'+ _o.mName +'_2');
_o.mo1Width = _o.mObj1.scrollWidth;
_o.mo1Height = _o.mObj1.scrollHeight;

// 初始滚动
if(_o.autoStart) _o.start();
};

// 开始滚动
_o.start = function() {
_o.mDo = setInterval((_o.mode=='x' ? _o.moveX : _o.moveY), _o.speed);
if(_o.movePause) {
_o.mObj.onmouseover = function() {_o.pause = true;} 
_o.mObj.onmouseout = function() {_o.pause = false;}
}
}

// 停止滚动
_o.stop = function() {
clearInterval(_o.mDo)
_o.mObj.onmouseover = function() {} 
_o.mObj.onmouseout = function() {}
}

// 水平滚动
_o.moveX = function() {
if(_o.pause) return;
var left = _o.mObj.scrollLeft;
if(left==_o.mo1Width){ 
_o.mObj.scrollLeft = 0 ;
}else if(left>_o.mo1Width) {
_o.mObj.scrollLeft = left-_o.mo1Width;
}else{ 
_o.mObj.scrollLeft++;
}
};

// 垂直滚动
_o.moveY = function() {
if(_o.pause) return;
var top = _o.mObj.scrollTop;
if(top==_o.mo1Height){ 
_o.mObj.scrollTop = 0 ;
}else if(top>_o.mo1Height) {
_o.mObj.scrollTop = top-_o.mo1Height;
}else{ 
_o.mObj.scrollTop++;
}
};

_o.init();
}
//-->
</SCRIPT>

<DIV class=case>
<DIV class=title><A class=r href="#">Top</A>Marquee 调用方法</DIV>
<DIV class=b>new Marquee({obj, name, mode, speed, autoStart, movePause});</DIV>
<UL class="info gray">
<LI><SPAN class=key>obj：</SPAN><SPAN class=type>Object</SPAN>滚动对象 (*必须) </LI>
<LI><SPAN class=key>name：</SPAN><SPAN class=type>String</SPAN>实例名 (*可选，默认随机) </LI>
<LI><SPAN class=key>mode：</SPAN><SPAN class=type>String</SPAN>滚动模式(x=水平, y=垂直) (*可选,默认为x) </LI>
<LI><SPAN class=key>speed：</SPAN><SPAN class=type>Number</SPAN>滚动速度，越小速度越快 (*可选，默认10) </LI>
<LI><SPAN class=key>autoStart：</SPAN><SPAN class=type>Boolean</SPAN>自动开始 (*可选，默认True) </LI>
<LI><SPAN class=key>movePause：</SPAN><SPAN class=type>Boolean</SPAN>鼠标经过是否暂停 (*可选，默认True) </LI></UL></DIV>
<DIV class=case>
<DIV class=title><A class=r href="#">Top</A><A name=1></A>Marquee 演示 - 横向模式</DIV>
<DIV class=MyMarqueeX id=MyMarqueeX>
<TABLE cellPadding=0 width="100%" align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=MYMQ_hjnw4_1>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"></TD></TR></TBODY></TABLE></TD>
<TD id=MYMQ_hjnw4_2>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV class=case>
<DIV class=title><A class=r href="#">Top</A><A name=1></A>Marquee 演示 - 纵向模式</DIV>
<DIV class=MyMarqueeY id=MyMarqueeY>
<DIV id=MYMQ_7b93f_1><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"><BR></DIV>
<DIV id=MYMQ_7b93f_2><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134g0yv.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134gf5r.jpg"><BR></DIV></DIV></DIV>
<DIV class=case>
<DIV class=title><A class=r href="#">Top</A><A name=1></A>Marquee 演示 - 横向模式（内容不够宽）</DIV>
<DIV class=MyMarqueeX id=MyMarqueeX2>
<TABLE cellPadding=0 width="100%" align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=MYMQ_n61ck_1>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD></TR></TBODY></TABLE></TD>
<TD id=MYMQ_n61ck_2>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134hl8x.jpg"></TD>
<TD><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134ax4v.jpg"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV class=case>
<DIV class=title><A class=r href="#">Top</A><A name=1></A>Marquee 演示 - 纵向模式（内容不够长）</DIV>
<DIV class=MyMarqueeY id=MyMarqueeY2><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134s7d9.jpg"><BR><IMG alt=魅力泉州 src="http://w.fj126.net/?/art/file/preview/08919134i3mq.jpg"><BR></DIV></DIV>
<SCRIPT language=javascript type=text/javascript>
//
</SCRIPT>

提示：您可以先修改部分代码再运行

顶一下

打印本文  加入收藏  返回顶部  关闭窗口Tags：

上一篇：XHTML+CSS制作的网站导航菜单

下一篇：aspjpeg2.0组件下载（适用32位/64位系统）

Marquee替代 -- 无间滚动[IE6-7, FF, OP...]

打印本文 加入收藏 返回顶部 关闭窗口Tags：

打印本文加入收藏返回顶部关闭窗口Tags：