想要使用这款组件,需要页面引入 MSClass.js 核心文件,该文件在您的HTML文档<head>标签之内。
参数直接赋值法:
<textarea rows="5" readonly><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> </textarea>参数动态赋值法:
<textarea rows="12" readonly><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> </textarea>对象直接赋值法:
<textarea rows="15" readonly><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> </textarea>
- 对于复杂/高级应用推荐使用"<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 |