Javascript教程_Marquee替代 -- 无间滚动

文章类别：Javascript | 发表日期:2010-5-4 9:24:11


图片滚动展示在企业站中很经常用到.

虽然Marquee可以实现.

但是..屁股总是带着一片空白.!

客户不乐意了.觉得太难看.

那就做无间滚动吧.

虽然我觉得不难~.可并不是人人都懂JS.

无奈!.为了避免每次出错的时候都喊救命...

重新做了个.调用尽量简单化了.~至少我感觉简单了...

废话不多说...

引用:
声明：

如果第一跟第二个演示无法滚动。那是因为你的分辨率太大。

内容大小没有超出容器大小。初始函数不进行处理。不属于bug范围

请将窗口缩小再刷新。



第三与第四个演示为内容大小不够的情况。
下面代码:

自己看,自己研究~~虽然没什么好研究的...

完全拿来主义也不反对...



2008.8.29  修正

引用:

发现个判断错误.

判断是否滚动时..竟然犯低级逻辑错误...

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;
<!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>

下面是有注解的
代码:
<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>

上一篇：{教程}Javascript教程_Marquee替代 -- 无间滚动人气:2314
下一篇：{教程}Javascript教程_超全的JS树形菜单源代码教程人气:4568

Javascript视频教程

视频教程列表

计算机基础入门及办公自动化:

网页制作开发视频教程:

平面广告设计视频教程

初级程序设计及ASP动态网站开发

Asp.net动态网站开发视频教程

Flash 动画角本编程视频教程

文章教程搜索

Javascript推荐教程

.javascript视频教程(21视频教程

.Javascript 篱式条件判断

.javaScript事件使用方法

.百度源代码里的精妙javascript图

.内容拷贝增加版权信息的JavaScr

.JS函数实现鼠标指向后带图片的提

.用javascript+php随机显示图片

.document.onLoad的触发时间

.在b/s开发中经常用到的javascri

.利用Javascript建立Web应用

.Js之软键盘实现(源码)

.通过JAVAScript实现页面自适应

.js用于树型结构级联选择

.注意JavaScript中RegExp对象的t

.关于ie的内存泄漏与javascript内

.javascript实现datagrid客户端c

.用Javascript轻松制作一套简单的

.js事件与处理

.js对象属性及方法

.js语句及语法

.js数据类型与变量

.js运行环境

.js与java区别

.js简介与特点

.JavaScript入门教程(五)

.JavaScript入门教程(四)

.JavaScript入门教程(三)

.JavaScript入门教程(二)

.JavaScript入门教程(一)

Javascript热门教程

.打造不同的网页特效：jQuery插件

.打造不同的网页特效：jQuery插件

.打造不同的网页特效：jQuery插件

.打造不同的网页特效：jQuery插件

.打造不同的网页特效：jQuery插件

.Javascript教程:字符串连接

.Javascript教程：动态样式加载的

.Javascript教程：链接调整平滑滚

.Java Servlet编程及应用描述三

.Java Servlet编程及应用描述一

.Java Servlet编程及应用描述一

.Javascript教程：弹出式窗口的实

.Javascript教程：IE6浏览器maxwi

.Javascript教程:网页拖放实现代

.Javascript教程:网页拖放实现代

.Javascript教程:网页拖放实现代

.Javascript教程：HTM中嵌入嵌入J

.Javascript教程:控制DIV属性

.Javascript教程:通过鼠标点击改

.Javascript教程:记住登陆密码

.Javascript教程:模拟登陆接收参

.javascript教程：创建函数声明及

.运用XML实现“购物车”代码案例

.Javascript教程:特殊的水波文字

.Javascript教程:跟随鼠标的方块

.Javascript教程:原生对象的原型

.Javascript教程:原型的动态性

.Javascript教程:更简单的原型语

.Javascript教程:原型对象中in操

.Javascript教程:什么是原型对象

Windows操作 [文]	Word教程 [文]	Excel教程 [文]	PowerPoint [文]	Dreamweaver [文]	Fireworks [文]
Flash教程 [文]	PhotoShop [文]	CorelDraw [文]	C语言教程 [文]	Html教程 [文]	Div+Css布局 [文]
Javascript [文]	ACCESS数据库 [文]	ASP教程 [文]	SQLServer [文]	ASP.NET教程 [文]	FlashAS [文]

Word教程网	Excel教程网	Dreamweaver 教程网	Fireworks教程网	PPT教程网	FLASH教程网	PS教程网
HTML教程网	DIV CSS教程网	FLASH AS教程网	ACCESS教程网	SQL SERVER教程网	C语言教程网	JAVASCRIPT教程网
ASP教程网	ASP.NET教程网	CorelDraw教程网