MSClass,是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字的滚动/切入/渐显等效果,同时支持横向/竖向/连续/间断/缓动等多种形式。
示例
文字类应用实例演示
图片类应用实例演示
图文类应用实例演示
高级应用实例演示
入门
想要使用这款组件,需要页面引入 MSClass.js 核心文件,该文件在您的HTML文档
标签之内。参数直接赋值法:
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();
对象直接赋值法:
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
});
使用建议:
对于复杂/高级应用推荐使用"对象直接赋值法"创建应用实例
对于DIV+CSS(UL+LI)应用中,若文字不可见请先尝试指定LI的字体大小
建议直接赋予容器的显示区域的宽度和高度,如(
建议为容器添加样式overflow = auto,如(
为了更准确的获取滚动区域的宽度和高度,请尽可能将各滚动单位直接赋予正确宽高度
对于TABLE标记的横向滚动,需要对TABLE添加样式display = inline,如(
)对于翻屏滚动或间歇滚动,要注意各滚动单位间的间距,同时需要对容器的可视高度和可视宽度做好准确的设置,对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整
若对于UL、LI自动换行的样式设置问题上存在困难,建议将其转换成表格(TABLE)的形式来达到同等的效果
针对横向滚动的文字段落,如果最末端是以空格" "结束的,请将空格" "转换成" "
鼠标悬停滚动思想源自Flash,所以有一定的局限性(容器内仅允许用图片或者带链接的图片的形式,并需要禁止其自动换行)
若用户有隐藏区域的应用(display=none),应在此脚本生效后,动态将该区域设置成不显示方可生效,或者通过"对象直接赋值法"将隐藏区域ID传递给HiddenID它的特点:
横向、纵向滚动格式调整 (解决横向滚动换行的问题,无需特殊设置), 彻底解决由于IE问题导致上下滚动页面留白的问题,它可以禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1), 判断是否可以滚动 (若内容区域小于显示区域,则自动取消滚动),跳过初始化错误 (避免引起其它滚动的停止),默认值 (除容器ID必选外,其他参数均可根据情况进行选择设置),参数动态赋值,文字滚动不准确 (本次更新主要目的解决此Bug,感谢周珺参与测试),鼠标悬停改变滚动方向 (鼠标悬停控制左右滚动),由于文档下载过慢而导致获取的高度/宽度不准确。兼容IE、FF、Opera、NS、MYIE等众多浏览器。