经典论坛's Archiver

mudoo 发表于 2008-8-27 22:39

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

图片滚动展示在企业站中很经常用到.
虽然Marquee可以实现.
但是..屁股总是带着一片空白.!
客户不乐意了.觉得太难看.
那就做无间滚动吧.
虽然我觉得不难~.可并不是人人都懂JS.
无奈!.为了避免每次出错的时候都喊救命...
重新做了个.调用尽量简单化了.~至少我感觉简单了...
废话不多说...

[quote]声明：
如果第一跟第二个演示无法滚动。那是因为你的分辨率太大。
内容大小没有超出容器大小。初始函数不进行处理。不属于bug范围
请将窗口缩小再刷新。

第三与第四个演示为内容大小不够的情况。[/quote]

[b][color=Red]下面代码:[/color][/b]
[color=DarkRed][b]自己看,自己研究~~虽然没什么好研究的...
完全拿来主义也不反对...[/b][/color]

[b][color=Red]2008.8.29  修正[/color][/b]
[quote]发现个判断错误.
判断是否滚动时..竟然犯低级逻辑错误...
if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') && (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return;

应该改为

if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') || (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return;
[/quote]

[html]<!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=utf-8" />
<title>Marquee 替代 -- 无间滚动</title>
<style type="text/css">
<!--
* {padding: 0; margin: 0}
body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}
input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}
textarea {padding: 5px; line-height: 20px}
p {margin: 1em 0}
ul {}
li {height: 1%; overflow: hidden; list-style-type: none}
a {color: #666666; text-decoration: none}
a:hover {color: #333333}
.r {float: right}
.l {float: left}
.b {font-weight: bold}
.gray {color: #666666; margin-top: 8px}
.light {color:#FF6600; margin: 0 5px}
.case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}
.title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA}
.call {display:block;}
.key {display: block; width: 8em; float: left}
.type {display: block; width: 6em; float: left}
.info {padding-left: 2em}
.demo {margin-bottom: 2em}
-->
</style>
<style type="text/css">
<!--
.MyMarqueeX {width: 98%; height: 150px; overflow: hidden; margin: 0 auto 0 auto}
        .MyMarqueeX img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
.MyMarqueeY {width: 205px; height: 420px; overflow: hidden;}
        .MyMarqueeY img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
-->
</style>
<script language="javascript" type="text/javascript">
//<!--
// 附带函数
var
// 用ID获取元素
$ = function(element) {
        return typeof(element) == 'object' ? element : document.getElementById(element);
},
// 生成随机数
RandStr = function(n, u){
        var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
        var Len = tmStr.length;
        var Str = "";
        for(i=1;i<n+1;i++){
                Str += tmStr.charAt(Math.random()*Len);
        }
        return (u ? Str.toUpperCase() : Str);
};
//-->
</script>
<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>
</head>
<body>
<div class="case">
        <div class="title"><a href="#" class="r">Top</a>Marquee&nbsp;调用方法</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>滚动对象&nbsp;&nbsp;(*必须)</li>
                <li><span class="key">name：</span><span class="type">String</span>实例名&nbsp;&nbsp;(*可选，默认随机)</li>
                <li><span class="key">mode：</span><span class="type">String</span>滚动模式(x=水平, y=垂直)&nbsp;&nbsp;(*可选,默认为x)</li>
                <li><span class="key">speed：</span><span class="type">Number</span>滚动速度，越小速度越快&nbsp;&nbsp;(*可选，默认10)</li>
                <li><span class="key">autoStart：</span><span class="type">Boolean</span>自动开始&nbsp;&nbsp;(*可选，默认True)</li>
                <li><span class="key">movePause：</span><span class="type">Boolean</span>鼠标经过是否暂停&nbsp;&nbsp;(*可选，默认True)</li>
        </ul>
</div>
<div class="case">
        <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示&nbsp;-&nbsp;横向模式</div>
        <div id="MyMarqueeX" class="MyMarqueeX">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                                <td><img src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /></td>
                        </tr>
                </table>
        </div>
</div>
<div class="case">
        <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示&nbsp;-&nbsp;纵向模式</div>
        <div id="MyMarqueeY" class="MyMarqueeY">
                <img src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /><br />
        </div>
</div>
<div class="case">
        <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示&nbsp;-&nbsp;横向模式（内容不够宽）</div>
        <div id="MyMarqueeX2" class="MyMarqueeX">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                                <td><img src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /></td>
                        </tr>
                </table>
        </div>
</div>
<div class="case">
        <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示&nbsp;-&nbsp;纵向模式（内容不够长）</div>
        <div id="MyMarqueeY2" class="MyMarqueeY">
                <img src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /><br />
        </div>
</div>
<script language="javascript" type="text/javascript">
//<!--
/*********************************************
  - Marquee 演示
*********************************************/
new Marquee({
        obj : 'MyMarqueeX',
        movePause : false
});
new Marquee({
        obj : 'MyMarqueeY',
        mode : 'y'
});
new Marquee({
        obj : 'MyMarqueeX2',
        movePause : false
});
new Marquee({
        obj : 'MyMarqueeY2',
        mode : 'y'
});
//-->
</script>
</body>
</html>[/html]

[[i] 本帖最后由 mudoo 于 2008-8-30 18:28 编辑 [/i]]

TBlack 发表于 2008-8-27 22:42

说说思想..

mudoo 发表于 2008-8-27 22:46

本人小时候不好好读书.墨水N少~`
不擅长写教程.~~
自己慢慢看.直接也可以用...

vvsamln 发表于 2008-8-28 00:05

好东西  收藏了 感谢楼主 能给讲讲不  来点注释:D

[code]<script language="javascript" type="text/javascript">
//<!--
// 附带函数
var
// 用ID获取元素
$ = function(element) {
        return typeof(element) == 'object' ? element : document.getElementById(element);
},
// 生成随机数
RandStr = function(n, u){
        var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
        var Len = tmStr.length;
        var Str = "";
        for(i=1;i<n+1;i++){
                Str += tmStr.charAt(Math.random()*Len);
        }
        return (u ? Str.toUpperCase() : Str);
};
//-->
</script>
<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>
[/code]

mudoo 发表于 2008-8-28 11:53

不是都有注释了么？..

zhenzhenle 发表于 2008-8-28 16:42

好东西收藏了

261509559 发表于 2008-8-28 16:46

不错，收藏一个先

xkang 发表于 2008-8-29 09:43

楼主辛苦！不过还有个悬停状态貌似还没做吧

wolfxyx 发表于 2008-8-29 14:06

辛苦。。我就拿来主义了

yymax 发表于 2008-8-29 20:55

IE7下，横向滚动到一定时间就停止了
哈哈

mudoo 发表于 2008-8-29 21:50

回复 10# yymax 的帖子

貌似没可能吧.偶就在IE7下做的...
具体什么情况?

yymax 发表于 2008-8-29 21:59

晕倒啊，居然现在打开 左侧不滚动了

mudoo 发表于 2008-8-29 22:06

回复 12# yymax 的帖子

刚在编辑。
现在应该可以了，还有问题请联系我。

km268 发表于 2008-8-30 10:52

IE6下，横向无悬停，纵向内容不够长的仅显示两张图片且无效果；

mudoo 发表于 2008-8-30 12:06

回复 14# km268 的帖子

那就是正常...
横向无悬停是演示里故意设置的。movePause: false
内容大小没超过容器大小就不滚动。

yymax 发表于 2008-8-30 12:36

我是SP2
IE7
分辨率是1680*1050

运行打开以后，无论是最大化窗口，还是1024窗口，横向都不滚 :confused:

lenlens 发表于 2008-8-30 15:18

发现个小小的问题，在宽屏的情况下，横向的不会滚动，因为横向的css的width是98%，改成实际px就可以了

tmulmt 发表于 2008-8-30 16:18

我这里看一切正常，多谢楼主辛苦。如果能写写教程就更好了，让俺们都学一下，自己看着费劲啊。:p

yymax 发表于 2008-8-30 20:30

恭喜楼主
贺喜楼主
现在滚了;-)

阿智 发表于 2008-8-30 20:33

声明：
如果第一跟第二个演示无法滚动。那是因为你的分辨率太大。
内容大小没有超出容器大小。初始函数不进行处理。不属于bug范围
请将窗口缩小再刷新。

==========================================
为什么不将滚动操作监控到ONRESIZE事件中.
在打开页面后,大的情况下就不滚动,拉小就滚动

mudoo 发表于 2008-8-30 20:45

回复 19# yymax 的帖子

因为写声明比写函数要快.
要加班...过两天再写~~.

t2eyes 发表于 2008-8-31 13:54

不知道是因为我电脑的原因还是因为楼主没有进行编辑

就只有第二个有鼠标悬停。。。。


但对楼主的共享精神还是万般崇拜和支持的！

学习ing。。。

mudoo 发表于 2008-8-31 14:49

回复 22# t2eyes 的帖子

请认真看演示代码...
#15已经说过了.

t2eyes 发表于 2008-8-31 15:41

回复 23# mudoo [楼主] 的帖子

收到了，惭愧...

谢谢···

龙飞凤舞 发表于 2008-9-1 22:36

在1920*1200 下第一/二个效果正常。第3/4个内容不够没动。

rainbutterfly 发表于 2008-9-2 09:47

非常感谢  收藏了

ttkl3239 发表于 2008-9-3 20:43

无间滚动

无间滚动

blank99 发表于 2008-9-11 15:43

是非常不错,但代码实在太长了,为一个效果加这么多代码不划算!不过还是谢谢!

lingboxia 发表于 2008-9-12 07:24

不错，收藏一个先

bbsonline 发表于 2008-9-12 08:45

恩收到支持 啊

eays 发表于 2008-9-12 09:41

简单封装了一下：）不明白为啥用_o取代this，看起来乱，呵呵
[html]
<!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=utf-8" />
<title>Marquee 替代 -- 无间滚动</title>
<style type="text/css">
<!--
* {padding: 0; margin: 0}
body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}
input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}
textarea {padding: 5px; line-height: 20px}
p {margin: 1em 0}
ul {}
li {height: 1%; overflow: hidden; list-style-type: none}
a {color: #666666; text-decoration: none}
a:hover {color: #333333}
.r {float: right}
.l {float: left}
.b {font-weight: bold}
.gray {color: #666666; margin-top: 8px}
.light {color:#FF6600; margin: 0 5px}
.case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}
.title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA}
.call {display:block;}
.key {display: block; width: 8em; float: left}
.type {display: block; width: 6em; float: left}
.info {padding-left: 2em}
.demo {margin-bottom: 2em}
-->
</style>
<style type="text/css">
<!--
.MyMarqueeX {width: 98%; height: 150px; overflow: hidden; margin: 0 auto 0 auto}
        .MyMarqueeX img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
.MyMarqueeY {width: 205px; height: 420px; overflow: hidden;}
        .MyMarqueeY img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
-->
</style>

<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 Marquee(inits) {
        this.MyMarquees = new Array();
        var _o = this;
        var _i = inits;
       
        if(_i.obj==undefined) return;
        _o.mode           = _i.mode==undefined ? 'x' : _i.mode;                        // 滚动模式(x:横向, y:纵向)
        _o.mName        = this.getMarqueeName(_i.name);                                                        // 实例名
        _o.mObj                = this.$(_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;
               
                this.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 = this.$('MYMQ_'+ _o.mName +'_1');
                _o.mObj2 = this.$('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();
}
Marquee.prototype.getMarqueeName = function(mName) {
    var name = mName==undefined ? this.RandStr(5) : mName;
    var myNames = ','+ this.MyMarquees.join(',') +',';
   
    while(myNames.indexOf(','+ name +',')!=-1) {
        name = RandStr(5);
    }
    return name;
}
Marquee.prototype.RandStr = function(n, u){
    var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
    var Len = tmStr.length;
    var Str = "";
    for(i=1;i<n+1;i++){
        Str += tmStr.charAt(Math.random()*Len);
    }
    return (u ? Str.toUpperCase() : Str);
};
Marquee.prototype.$ = function(element) {
    return typeof(element) == 'object' ? element : document.getElementById(element);
}

//-->
</script>
</head>
<body>
<div class="case">

        <div class="title"><a href="#" class="r">Top</a>Marquee&nbsp;调用方法</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>滚动对象&nbsp;&nbsp;(*必须)</li>
                <li><span class="key">name：</span><span class="type">String</span>实例名&nbsp;&nbsp;(*可选，默认随机)</li>

                <li><span class="key">mode：</span><span class="type">String</span>滚动模式(x=水平, y=垂直)&nbsp;&nbsp;(*可选,默认为x)</li>
                <li><span class="key">speed：</span><span class="type">Number</span>滚动速度，越小速度越快&nbsp;&nbsp;(*可选，默认10)</li>
                <li><span class="key">autoStart：</span><span class="type">Boolean</span>自动开始&nbsp;&nbsp;(*可选，默认True)</li>

                <li><span class="key">movePause：</span><span class="type">Boolean</span>鼠标经过是否暂停&nbsp;&nbsp;(*可选，默认True)</li>
        </ul>
</div>
<div class="case">
        <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示&nbsp;-&nbsp;横向模式</div>
        <div id="MyMarqueeX" class="MyMarqueeX">

                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                                <td><img src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /></td>

                                <td><img src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /></td>
                        </tr>
                </table>
        </div>
</div>

<div class="case">
        <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示&nbsp;-&nbsp;纵向模式</div>
        <div id="MyMarqueeY" class="MyMarqueeY">
                <img src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /><br />

                <img src="http://www.fjhongyi.com/img/35.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/36.jpg" alt="魅力泉州" /><br />
        </div>
</div>
<div class="case">
        <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示&nbsp;-&nbsp;横向模式（内容不够宽）</div>
        <div id="MyMarqueeX2" class="MyMarqueeX">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">

                        <tr>
                                <td><img src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/33.jpg" alt="魅力泉州" /></td>
                                <td><img src="http://www.fjhongyi.com/img/34.jpg" alt="魅力泉州" /></td>
                        </tr>
                </table>
        </div>
</div>

<div class="case">
        <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示&nbsp;-&nbsp;纵向模式（内容不够长）</div>
        <div id="MyMarqueeY2" class="MyMarqueeY">
                <img src="http://www.fjhongyi.com/img/31.jpg" alt="魅力泉州" /><br />
                <img src="http://www.fjhongyi.com/img/32.jpg" alt="魅力泉州" /><br />
        </div>
</div>
<script language="javascript" type="text/javascript">
//<!--
/*********************************************
  - Marquee 演示
*********************************************/
new Marquee({
        obj : 'MyMarqueeX',
        movePause : true
});
//-->

</script>
</body>
</html>
[/html]
封装后的javascript代码，
function Marquee(inits) {
        this.MyMarquees = new Array();
        var _o = this;
        var _i = inits;
       
        if(_i.obj==undefined) return;
        _o.mode           = _i.mode==undefined ? 'x' : _i.mode;                        // 滚动模式(x:横向, y:纵向)
        _o.mName        = this.getMarqueeName(_i.name);                                                        // 实例名
        _o.mObj                = this.$(_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;
               
                this.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 = this.$('MYMQ_'+ _o.mName +'_1');
                _o.mObj2 = this.$('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();
}
Marquee.prototype.getMarqueeName = function(mName) {
    var name = mName==undefined ? this.RandStr(5) : mName;
    var myNames = ','+ this.MyMarquees.join(',') +',';
   
    while(myNames.indexOf(','+ name +',')!=-1) {
        name = RandStr(5);
    }
    return name;
}
Marquee.prototype.RandStr = function(n, u){
    var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
    var Len = tmStr.length;
    var Str = "";
    for(i=1;i<n+1;i++){
        Str += tmStr.charAt(Math.random()*Len);
    }
    return (u ? Str.toUpperCase() : Str);
};
Marquee.prototype.$ = function(element) {
    return typeof(element) == 'object' ? element : document.getElementById(element);
}

[[i] 本帖最后由 eays 于 2008-9-12 09:44 编辑 [/i]]

mudoo 发表于 2008-9-15 21:30

回复 31# eays 的帖子

封装啥？
$,RandStr是偶从公用函数中抽出来的...
不用封了.

sunxiaobo2008 发表于 2008-9-15 23:45

以前见到过一个很专业的写js滚动的，各种各样的，全部都是封装好的，不过这个也不错，比较实用

dnaliang 发表于 2008-9-16 10:52

我也标记下!!!

gnf1124 发表于 2008-9-17 16:25

个人感觉这种不停的滚动不适合放在使用次数比较多的页面，占用cpu太多的特效其实是耗无意义的，只会拖慢浏览器，降低用户体验

leifeng1 发表于 2008-9-17 16:32

留记号，必须的:D

huqiu2 发表于 2008-9-19 09:45

拿来主义者！(*^__^*)

jsw0528 发表于 2008-9-19 10:46

<script language="javascript" type="text/javascript">-_!!

MS<script type="text/javascript">这样写才符合标准吧

LZ的代码不错，就是长了点

贴上我用的

[color=Red]横向：[/color]
[html]<!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>无间滚动-兼容IE7 IE6 FireFox Opera</title>
<style type="text/css">
#demo { margin:30px auto 0; width:800px; overflow:hidden; }
img { border:2px solid #e6e6e6; padding:1px; }
</style>
</head>

<body>
<div id="demo">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <td id="demo1">
    <table width="100%" border="0" cellspacing="8" cellpadding="0">
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/31.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/32.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/33.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/34.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/35.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/36.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/31.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/32.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/33.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/34.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/35.jpg" alt="" /></td>
        <td><img src="http://www.fjhongyi.com/img/36.jpg" alt="" /></td>
      </tr>
    </table>
    </td>
    <td id="demo2">&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>
<script type="text/javascript">
var speed = 20; //数字越大，速度越慢
var ZJJDemo = document.getElementById('demo');
var ZJJDemo1 = document.getElementById('demo1');
var ZJJDemo2 = document.getElementById('demo2');
ZJJDemo2.innerHTML = ZJJDemo1.innerHTML
function Marquee1(){
        if(ZJJDemo2.offsetWidth-ZJJDemo.scrollLeft<=0)
                ZJJDemo.scrollLeft-=ZJJDemo1.offsetWidth
        else{
                ZJJDemo.scrollLeft++
        }
}
var MyMar1 = setInterval(Marquee1,speed)
ZJJDemo.onmouseover = function() {clearInterval(MyMar1)}
ZJJDemo.onmouseout = function() {MyMar1=setInterval(Marquee1,speed)}
</script>
[/html]

[color=Red]纵向：[/color]
[html]<!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>无间滚动-兼容IE7 IE6 FireFox Opera</title>
<style type="text/css">
#demo { margin:30px auto 0; width:200px; height:500px; overflow:hidden; }
img { border:2px solid #e6e6e6; padding:1px; }
</style>
</head>

<body>
<div id="demo">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <td id="demo1">
    <table width="100%" border="0" cellspacing="8" cellpadding="0">
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/31.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/32.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/33.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/34.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/35.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/36.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/31.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/32.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/33.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/34.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/35.jpg" alt="" /></td>
      </tr>
      <tr align="center">
        <td><img src="http://www.fjhongyi.com/img/36.jpg" alt="" /></td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td id="demo2">&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>
<script type="text/javascript">
var speed = 20; //数字越大，速度越慢
var ZJJDemo = document.getElementById('demo');
var ZJJDemo1 = document.getElementById('demo1');
var ZJJDemo2 = document.getElementById('demo2');
ZJJDemo2.innerHTML = ZJJDemo1.innerHTML
function Marquee1(){
        if(ZJJDemo2.offsetHeight-ZJJDemo.scrollTop<=0)
                ZJJDemo.scrollTop-=ZJJDemo1.offsetHeight
        else{
                ZJJDemo.scrollTop++
        }
}
var MyMar1 = setInterval(Marquee1,speed)
ZJJDemo.onmouseover = function() {clearInterval(MyMar1)}
ZJJDemo.onmouseout = function() {MyMar1=setInterval(Marquee1,speed)}
</script>
[/html]

[[i] 本帖最后由 jsw0528 于 2008-9-19 10:53 编辑 [/i]]

shadowhuan 发表于 2008-9-19 13:28

LZ好人。:)

页: [1]



Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.