再次更新！MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)

更新时间：2007年02月05日 00:00:00 作者：

/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\

　制作时间:2006-08-29 (Ver 0.5)
　发布时间:2006-08-31 (Ver 0.8)
　更新时间:2007-01-31 (Ver 1.6)
　更新说明: + 加入功能 * 修正、完善
1.6.070131
+ 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1)
+ 判断是否可以滚动 (若内容区域小于显示区域,则自动取消滚动)
+ 跳过初始化错误 (避免引起其它滚动的停止)
+ 默认值 (除容器ID必选外，其他参数均可根据情况进行选择设置)
+ 参数动态赋值 (方向可用英文表示top|bottom|left|right,使其更直观、方便)
* 文字滚动不准确 (本次更新主要目的解决此Bug,感谢周珺参与测试)
1.4.061211
+ 鼠标悬停改变滚动方向 (鼠标悬停控制左右滚动)
* 由于文档下载过慢而导致获取的高度/宽度不准确
* 浏览器兼容问题 (IE、FF、Opera、NS、MYIE)
1.2.060922
+ 指定范围间歇滚动
* 程序调整
* 连续间歇滚动停止的错误
1.0.060901
+ 向下、向右滚动
+ 开始等待时间
+ 连续滚动
* 调整时间单位
* 滚动误差
* 随机死循环
* 加强性能
* 程序优化
0.8.060829
翻屏不间断向上、向左滚动

　演示地址:http://www.popub.net/script/MSClass.html
　下载地址:http://www.popub.net/script/MSClass.js

　应用说明:页面包含<script type="text/javascript" src="MSClass.js"></script>

创建实例:
//参数直接赋值法
new Marquee("marquee")
new Marquee("marquee","top")
......
new Marquee("marquee",0,1,760,52)
new Marquee("marquee","top",1,760,52,50,5000)
......
new Marquee("marquee",0,1,760,104,50,5000,3000,52)
new Marquee("marquee",null,null,760,104,null,5000,null,-1)

//参数动态赋值法
var marquee1 = new Marquee("marquee") *此参数必选
marquee1.Direction = "top"; 或者 marquee1.Direction = 0;
marquee1.Step = 1;
marquee1.Width = 760;
marquee1.Height = 52;
marquee1.Timer = 50;
marquee1.DelayTime = 5000;
marquee1.WaitTime = 3000;
marquee1.ScrollStep = 52;
marquee1.Start();

参数说明:
ID "marquee" 容器ID (必选)
Direction (0) 滚动方向 (可选,默认为0向上滚动) 可设置的值包括:0,1,2,3,"top","bottom","left","right" (0向上 1向下 2向左 3向右)
Step (1) 滚动的步长 (可选,默认值为2,数值越大,滚动越快)
Width (760) 容器可视宽度 (可选,默认值为容器初始设置的宽度)
Height (52) 容器可视高度 (可选,默认值为容器初始设置的高度)
Timer (50) 定时器 (可选,默认值为30,数值越小,滚动的速度越快,1000=1秒,建议不小于20)
DelayTime (5000) 间歇停顿延迟时间(可选,默认为0不停顿,1000=1秒)
WaitTime (3000) 开始时的等待时间(可选,默认或0为不等待,1000=1秒)
ScrollStep (52) 间歇滚动间距 (可选,默认为翻屏宽/高度,该数值与延迟均为0则为鼠标悬停控制,-1禁止鼠标控制)
　使用建议:
1、建议直接赋予容器的显示区域的宽度和高度，如(<div id="marquee" style="width:760px;height:52px;">......</div>)
2、建议为容器添加样式overflow = auto，如(<div id="marquee" style="width:760px;height:52px;overflow:auto;">......</div>)
3、为了更准确的获取滚动区域的宽度和高度，请尽可能将各滚动单位直接赋予正确宽高度
4、对于TABLE标记的横向滚动，需要对TABLE添加样式display = inline，如(<div id="marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">......</table></div>)
5、对于翻屏滚动或间歇滚动，要注意各滚动单位间的间距，同时需要对容器的可视高度和可视宽度做好准确的设置，对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整
6、对于LI自动换行的问题暂时没有更好的解决办法，建议将其转换成表格(TABLE)的形式来达到同等的效果
7、针对横向滚动的文字段落，如果最末端是以空格" "结束的，请将空格" "转换成" "
8、鼠标悬停滚动思想源自Flash，所以有一定的局限性（容器内仅允许用图片<img>或者带链接的图片<a><img></a>的形式，并需要禁止其自动换行）

　感　　谢:
周珺 zhoujun#yuchengtech.com (文字滚动跳行的bug) 2007/01/31
自本程序发布以来，收到不少朋友的邮件，提出了很多意见和建议，感谢大家的支持！
很不错。

不过演示代码的new Marquee("marquee",0,1,760,52,50,5000,3000)那么多参数看了让人有点迷糊，呵呵，做成这种模式可能让人看得懂一些：

复制代码代码如下:

function Marquee()  
{  
    this.ID = document.getElementById(arguments[0]);  
    this.Direction = arguments[1];  
    this.Step = arguments[2];  
    this.Width = arguments[3];  
    this.Height = arguments[4];  
    this.Timer = arguments[5];  
    this.WaitTime = arguments[6];  
    this.StopTime = arguments[7];  
    this.CTL = this.StartID = this.Stop = this.MouseOver = 0;  
    this.ID.style.overflowX = this.ID.style.overflowY = "hidden";  
    this.ID.noWrap = true;  
    this.ID.style.width = this.Width;  
    this.ID.style.height = this.Height;  
    this.ID.innerHTML += this.ID.innerHTML;  
}  

然后使用：

复制代码代码如下:

var m = new Marquee;  
m.ID = document.getElementById("marquee");  
m.Direction = 0;  
m.Step = 1;  
m.Width = 760;  
// ......  
m.Start(m, m.Timer, m.WaitTime, m.StopTime); 

m.Start的参数好像都和m有关，可以省略掉？

您可能感兴趣的文章:

基于JS实现Flappy Bird游戏的示例代码
Flappy Bird是13年红极一时的小游戏，即摁上键控制鸟的位置穿过管道间的缝隙。本文将用JS实现这一经典的游戏，需要的可以参考一下
2022-04-04
微信小程序日期选择器使用详解
这篇文章主要为大家详细介绍了微信小程序日期选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
浏览器调试动态js脚本的方法(图解)
这篇文章主要介绍了浏览器调试动态js脚本的方法，文中给大家带来两种调试方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2018-01-01
JS中比较冷门但非常好用的方法总结
在Js中有一些比较冷门但是非常好用的方法，我在这里称之为高级方法，这些方法没有被广泛使用或多或少是因为存在一些兼容性的问题，不是所有的浏览器都读得懂的，这篇文章主要就是对这些方法做一个总结，让我们一起来看一下吧
2023-06-06
判断js数据类型的函数实例详解
这篇文章主要介绍了一个判断js数据类型的函数，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
请求时token过期自动刷新token操作
这篇文章主要介绍了请求时token过期自动刷新token操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
JavaScript避免代码的重复执行经验技巧分享
经常会发现一个问题，那就是重复的代码执行，下面就是一些在查看它们的源代码时发现一些问题，把这些分享给大家，希望能让你们更加简洁高效的写出JavaScript代码
2014-04-04
bootstrapTable+ajax加载数据 refresh更新数据
这篇文章主要为大家详细介绍了bootstrapTable+ajax加载数据，以及refresh更新数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-08-08
JavaScript实现购物车图片局部放大预览效果
这篇文章主要为大家详细介绍了JavaScript如何通过canvas简单实现购物车图片放大预览效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-03-03
基于JavaScript实现图片裁剪功能
在前端开发中，当遇到图片或头像上传等功能时，有尺寸分辨率限制的话，就需要用到图片的裁剪功能。本文为大家介绍了JavaScript实现图片裁剪功能的示例代码，希望对大家有所帮助
2023-02-02