MSClass

Class Of Marquee Scroll通用不间断滚动JS封装类

作者: 333

兼容如下浏览器

版本: (更新日志) 喜欢老版本的朋友请下载1.65.071228修正版

　更新说明: + 加入功能 * 修正、完善
2.9.120108(请加群了解新功能应用问题)
+ 微博效果支持(针对DIV+CSS应用有效,SwitchType设置成3开启此功能,ScrollStep设置为0非渐显,1渐显)
+ 根据各节点高/宽度自适应滚动效果支持(针对DIV+CSS间歇滚动应用有效,SwitchType设置成4开启此功能,ScrollStep为滚动节点数,默认1)
+ 切入效果Tween缓动类全支持
+ 加入对时间秒数直接设置的支持(如5秒即可以设置为5,也可以设置为5000)
+ 函数直接调用支持(即可以由函数直接创建实例，省略new实例创建操作)
+ 渐显/渐隐速率设定支持(由Timer参数控制)
+ 渐隐渐显效果支持(将SwitchType设置成2开启此功能,ScrollStep设置为0渐显,1渐隐渐显)
+ 加入即时切换效果支持(将SwitchType设置成5开启此功能)
+ 返回式滚动效果支持(即从尾部回滚至首部，间歇滚动有效 Direction设置为-2或5开启此功能)
+ 高宽度百分比设置支持(以字符串形式传值，如"20"或"20%")
+ 页码自动修正成整数倍支持
+ 页码/TAB每次滚动距离设置支持
+ 对UL、OL、DL直接赋值支持(参数直接赋值法有效，需有外部容器，不建议直接使用)
+ 页码总数量为1时自动取消页码显示
+ ReStart、Reset、Destroy方法支持(用于重新启用实例、销毁实例应用)
* 解决DIV+CSS由于宽度设置不正确导致纵向滚动可能留白的问题
* 解决DIV+CSS由于IE问题导致文字横向或纵向滚动可能存在跳跃情况的问题
* 取消对鼠标悬停调整速度的支持
* 取消对右键菜单的支持
* 鼠标滑动切换页码可能出现误差
* 修正针对初始无内容情况下页码误报问题
* 修正两处IE兼容问题(table-cell)
* 修正Maxthon及Netscape针对LI纵向图片间隙的兼容问题
2.8.110609
+ Tween缓动类效果全支持(将Step设置为数组如[0.5,20]形式即可启用Tween的缓动,0.5为系数,20为缓动类别,对应类别如下,可设置成如[0.5,"easeInOutBounce"]形式)
　1　二次方缓入inquad　　　　　2　二次方缓出outquad　　　　3　二次方缓入缓出inoutquad　 4　三次方缓入incubic　　　　5　三次方缓出outcubic
　6　三次方缓入缓出inoutcubic　7　四次方缓入inquart　　　　8　四次方缓出outquart　　　　9　四次方缓入缓出inoutquart 10 五次方缓入inquint
　11 五次方缓出outquint　　　　12 五次方缓入缓出inoutquint 13 正弦曲线缓入insine　　　　14 正弦曲线缓出outsine　　　15 正弦曲线缓入缓出inoutsine
　16 指数曲线缓入inexpo　　　　17 指数曲线缓出outexpo　　　18 指数曲线缓入缓出inoutexpo 19 圆形曲线缓入incirc　　　 20 圆形曲线缓出outcirc
　21 圆形曲线缓入缓出inoutcirc 22 弹性缓入inelastic　　　　23 弹性缓出outelastic　　　　23 弹性缓入缓出inoutelastic 25 后退缓入inback
　26 后退缓出outback　　　　　 27 后退缓入缓出inoutback　　28 反弹缓入inbounce　　　　　29 反弹缓出outbounce　　　　30 反弹缓入缓出inoutbounce
+ 鼠标划过/点击延时切换功能
+ 右键菜单自定义扩展功能(右键菜单默认关闭)
+ OnPause事件支持(间歇滚动)
+ 加入Stop、Continue、Start、Pause、Play、Reset方法支持
* 页面刷新复位问题
* 其它一些小Bug
2.65.110518
+ 多层非显示(display=none)区域的支持(需将非显示容器元素ID以数组参数形式传递给HiddenID即可)
* 交替滚动手工触发状态判断错误
2.6.110516
+ 帮助菜单(右键打开)
+ OnScroll事件支持(间歇滚动)
+ 非显示(display=none)区域的支持(见应用实例)
+ 跳过等待时间同时改变运动方向(Run参数以英文字符传递即可,如Marquee1.Run("Left"))
+ TAB可通过点击进行切换(默认鼠标滑动切换)
+ 多TAB支持(多个TabID以数组形式传递,见应用实例)
+ 强制滚动(针对DIV+CSS强制滚动实现)
+ 默认样式保留(用户自定义样式可保留)
+ 下一次、上一次滚动支持(针对间歇滚动有效,需将ID传递给相关参数textareavBtnID、NextBtnID)
* 交替滚动边界判断延迟
* DIV+CSS缓动类滚动误差
* 交替间歇滚动缓动调整(小于间歇滚动间距的平滑处理)
* 向上跳过等待时间不起作用
* DIV+CSS鼠标划过暂停功能不起作用
2.5.110427
+ 对象直接量赋值(需将AutoStart设置为1开启自动运行功能,版本向下兼容，见应用实例)
+ DIV+CSS支持(UL+LI,DL+DT+DD,无需特别设置,需同时指定容器ID及内容ID,请参照应用实例)
+ Slide功能(即幻灯片功能,支持页码及TAB样式切换功能-需指定页码容器/TAB容器ID)
+ Lantern效果(即幻灯片切入效果,将SwitchType设置成1开启此功能)
+ 双向轮流切入效果(针对交替滚动Direction=-1|4有效,并将SwitchType设置成1开启此功能)
+ FadeIn效果(即渐显效果,将SwitchType设置成2开启此功能)
+ RevealTrans滤镜效果(IE有效,非IE自动转换为渐显效果,将SwitchType设置成大于3的数字开启此功能)
SwitchType效果列表(针对10~33效果,非IE自动转换为2渐显效果)(除0效果外,其余效果ScrollStep无效,针对2及以上效果Step无效)
　0　滚动(默认)　　　　1　切入　　　　　　　2　渐显　　　　　　　3　微博渐入渐显效果　4　节点自适应滚动
　5　即时切换　　　　　
　10 盒状收缩　　　　　11 盒状展开　　　　　12 圆形收缩　　　　　13 圆形展开　　　　　14 向上擦除
　15 向下擦除　　　　　16 向左擦除　　　　　17 向右擦除　　　　　18 垂直百页窗　　　　19 水平百页窗
　20 横向棋盘式　　　　21 纵向棋盘式　　　　22 溶解　　　　　　　23 左右向中部收缩　　24 中部向左右展开
　25 上下向中部收缩　　26 中部向上下展开　　27 阶梯状向左下展开　28 阶梯状向左上展开　29 阶梯状向右下展开
　30 阶梯状向右上展开　31 随机水平线　　　　32 随机垂直线　　　　33 随机(10~32效果)
* 程序调整
2.0.110401
+ 缓动功能(将Step设置成小于1的数字(缓动系数)即可开启缓动功能,如0.1,数值越大,滚动越快)
+ 鼠标拖动(对于连续滚动可以用鼠标左键进行拖动操作)
+ 跳过等待时间功能(针对间歇滚动,在停止状态下可跳过当次延迟时间(DelayTime))
+ 默认停止功能(针对间歇滚动,将WaitTime设置成60000或60(1分钟)后DelayTime仍起作用，设置成100000或100后DelayTime不起作用)
+ 交替滚动功能(即滚动至尽头后自动返向滚动,Direction=-1上下交替,Direction=4左右交替)
+ 边界状态判断功能(针对交替滚动触发OnBound、UnBound事件,使用者可对实际应用情况做相应事件处理,请参照应用实例)
* 程序优化
+ Slide功能(即幻灯片功能)及MARQUEE标签自动处理功能(It's A Joke,Please Wait …)
1.65.071228
* 横向、纵向滚动格式调整 (解决横向滚动换行的问题，无需特殊设置)
* 彻底解决由于IE问题导致上下滚动页面留白的问题 (本次更新主要解决此问题,感谢天上的书生参与测试)
1.6.070131
+ 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollStep设置为-1)
+ 判断是否可以滚动 (若内容区域小于显示区域,则自动取消滚动)
+ 跳过初始化错误 (避免引起其它滚动的停止)
+ 默认值 (除容器ID必选外，其他参数均可根据情况进行选择设置)
+ 参数动态赋值 (方向可用英文表示top|up|bottom|down|left|right|alterup|alterleft,使其更直观、方便)
* 文字滚动不准确 (本次更新主要目的解决此Bug,感谢周珺参与测试)
1.4.061211
+ 鼠标悬停改变滚动方向 (鼠标悬停控制左右滚动)
* 由于文档下载过慢而导致获取的高度/宽度不准确
* 浏览器兼容问题 (IE、FF、Opera、NS、MYIE、CHROME)
1.2.060922
+ 指定范围间歇滚动
* 程序调整
* 连续间歇滚动停止的错误
1.0.060901
+ 向下、向右滚动
+ 开始等待时间
+ 连续滚动
* 调整时间单位
* 滚动误差
* 随机死循环
* 加强性能
* 程序优化
0.8.060829
　翻屏不间断向上、向左滚动

下载: 下载MSClass.js(最新版)
许可: 在保留JS版权信息的基础上随意使用

介绍

MSClass,是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字的滚动/切入/渐显等效果,同时支持横向/竖向/连续/间断/缓动等多种形式。

示例

文字类应用实例演示
图片类应用实例演示
图文类应用实例演示
高级应用实例演示

入门

想要使用这款组件，需要页面引入 MSClass.js 核心文件，该文件在您的HTML文档<head>标签之内。

<script type="text/javascript" src="/path/MSClass.js"></script>

参数直接赋值法：

<script type="text/javascript">
	new Marquee("Marquee",0,1,760,104,50,5000,3000,52)
	new Marquee("Marquee",null,null,760,104,null,5000,null,-1)
</script>

参数动态赋值法：

<script type="text/javascript">
	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();
</script>

对象直接赋值法：

<script type="text/javascript">
	new Marquee(
	{
		MSClass	  : {MSClassID :  "MSClassBox " , ContentID :  "ContentID " , TabID :  "TabID "},
		Direction : "top",
		Step : 0.1,
		Width : 760,
		Height : 52,
		Timer : 50,
		DelayTime : 5000,
		WaitTime : 3000,
		ScrollStep: 52,
		AutoStart : 1
	});
	
	
	
	new Marquee(
	{
		MSClassID :  "MSClassBox ",
		ContentID :  "ContentID ",
		TabID :  "TabID ",
		Direction : "top",
		Step : [0.5,30],
		Width : 760,
		Height : 52,
		Timer : 50,
		DelayTime : 5000,
		WaitTime : 3000,
		ScrollStep: 52,
		AutoStart : 1
	});
	
	
	new Marquee(
	{
		MSClass : ["MSClassBox ","ContentID ","TabID "],
		Direction : "top",
		Step : [0.4,"easeOutElastic"],
		Width : 760,
		Height : 52,
		Timer : 50,
		DelayTime : 5000,
		WaitTime : 3000,
		ScrollStep: 52,
		AutoStart : 1
	});
</script>

使用建议：

对于复杂/高级应用推荐使用"<b>对象直接赋值法</b>"创建应用实例
对于DIV+CSS(UL+LI)应用中，若文字不可见请先尝试指定LI的字体大小
建议直接赋予容器的显示区域的宽度和高度，如(<div id="Marquee" style="width:760px;height:52px;">......</div>)
建议为容器添加样式overflow = auto，如(<div id="Marquee" style="width:760px;height:52px;overflow:auto;">......</div>)
为了更准确的获取滚动区域的宽度和高度，请尽可能将各滚动单位直接赋予正确宽高度
对于TABLE标记的横向滚动，需要对TABLE添加样式display = inline，如(<div id="Marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">......</table></div>)
对于翻屏滚动或间歇滚动，要注意各滚动单位间的间距，同时需要对容器的可视高度和可视宽度做好准确的设置，对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整
若对于UL、LI自动换行的样式设置问题上存在困难，建议将其转换成表格(TABLE)的形式来达到同等的效果
针对横向滚动的文字段落，如果最末端是以空格" "结束的，请将空格" "转换成" "
鼠标悬停滚动思想源自Flash，所以有一定的局限性(容器内仅允许用图片<img>或者带链接的图片<a><img></a>的形式，并需要禁止其自动换行)
若用户有隐藏区域的应用(display=none)，应在此脚本生效后，动态将该区域设置成不显示方可生效，或者通过"对象直接赋值法"将隐藏区域ID传递给HiddenID

配置

MSClass相关参数如下：

属性	类型	默认	描述
ID	string	必需	容器ID，通过new Mraquee("")第一个参数指定ID
Direction	integer	0	滚动方向(默认为0向上滚动) 值:0上 1下 2左 3右 -1上下交替 4左右交替
Step	integer/array	2	滚动的步长(数值越大,滚动越快,小于1切换为缓动。若为数组[0.5,20]形式，则可设置Tween的缓动类别,0.5为系数，20为缓动类别)
Width	integer	容器初始设置的宽度	容器可视宽度(默认值为容器初始设置的宽度)
Height	integer	容器初始设置的高度	容器可视高度(默认值为容器初始设置的高度)
Timer	integer	30	定时器，即频率/执行周期(默认值为30,数值越小,滚动的速度越快,1000=1秒,建议不小于20)
DelayTime	integer	0	间歇停顿延迟时间(默认为0不停顿,1000=1秒)
WaitTime	integer	0	开始时的等待时间(默认或0为不等待,1000=1秒)
ScrollStep	integer	0	间歇滚动间距(默认为翻屏宽/高度,该数值为-2，DelayTime为0则为鼠标悬停控制,-1禁止鼠标控制)
SwitchType	integer	0	轮显类型(默认为0滚动,可选值1切入,2渐显)
HiddenID	string/array	null	隐藏区域ID(可选,如果隐藏区域只有一层，可以用"hiddenid"的形式，如果多层，请用数组["hiddenid1","hiddenid2"]的形式全包含进去)
注意：以上参数针对直接赋值法应用有先后顺序之分，如：new Marquee("Marquee",0,1,760,104,20,5000,0,0,0,["hiddenid1","hiddenid2"])
MSClassID	string	针对对象赋值必需	容器ID
ContentID	string	UL+LI、DL+DT+DD必需	针对DIV+CSS的应用，属显示容器内的内容区域ID，即实际内容容器UL或DL的ID。
TabID	string/array	页码/TAB的ID	可选，如果需要页码/TAB支持，将相关ID传递进来即可，若多个Tab应用请以数组形式传递，如：["tabid1","tabid2"]。
TabEvent	string	onmouseover	可选，针对页码/TAB鼠标响应方式，默认"onmouseover"，鼠标划过即切换(可选值:"onclick")
TabTimeout	integer	鼠标响应延迟时间	可选，针对页码/TAB鼠标响应延迟时间，鼠标响应事件(TabEvent)在设定时间后方有效。
MSClass	array/object	若设置此项，则以上5项不需要设置	快速设置：["MSClassID","ContentID","TabID","TabEvent",200]分别对应上述相关参数,不需要的参数省略不写即可，如["MSClassID","ContentID"]； {MSClassID:"MSClassID",ContentID:"ContentID",TabID:"TabID",TabTimeout:200}分别对应上述相关参数,不需要的参数省略不写即可。
ContextMenu	array		右键菜单相关，可选，默认关闭，格式:[1,["menu1"],[],["menu2","fn()"]]。(0/1,开启/关闭；["menu1"]不可点击，[]分隔线,["menu2","fn()"]可点击及点击事件)
PrevBtnID	string		执行下一次滚动的元素ID，可选，针对间歇滚动有效
NextBtnID	string		执行上一次滚动的元素ID，针对间歇滚动有效
AutoStart	boolean	针对对象赋值有效	针对对象赋值设置是否使应用自动执行(省去Start步骤)。可选值：0,1,true,false

致谢

自本程序发布以来，收到不少朋友的邮件，提出了很多意见和建议，感谢大家的支持

版权声明

在保留JS版权信息的基础上随意使用，包括商业应用。