介绍
MSClass,是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字的滚动/切入/渐显等效果,同时支持横向/竖向/连续/间断/缓动等多种形式。
示例
- 文字类应用实例演示
- 文字翻屏滚动实例 关注:31416
- 文字横向滚动应用实例(DIV + CSS、鼠标拖动) 关注:20804
- 文字间歇滚动及开始等待时间实例 关注:14728
- 文字滚动应用，禁止鼠标控制暂停或滚动实例 关注:14175
- 文字纵向滚动应用实例(DIV + CSS、鼠标拖动) 关注:11862
- 针对TAB切换的隐藏区域应用实例 关注:10926
- 【※】非限定宽度横向滚动应用实例(DIV + CSS、鼠标拖动) 关注:8686
- 图片类应用实例演示
- 箭头控制滚动方向、加速及鼠标拖动实例 关注:31118
- 京东效果,DIV + CSS实例(UL + LI)Slide幻灯片滚动 + 页码(缓动) 关注:26842
- DIV + CSS左右交替滚动、缓动、默认静止、跳过等待时间改变方向及样式切换实例 关注:23371
- 左右交替滚动(缓动) 关注:20964
- 向左间歇滚动(非缓动) 关注:17376
- DIV + CSS(UL + LI)TAB轮显滑动门应用实例(缓动) 关注:17168
- 向上间歇滚动(缓动) 关注:16673
- 淘宝画报应用实例演示 关注:15033
- DIV + CSS(UL + LI)产品展示放大应用实例(缓动) 关注:14323
- 鼠标悬停滚动、开始等待时间及鼠标拖动实例 关注:14062
- 向上连续滚动及鼠标拖动实例 关注:13122
- 点击切换应用实例(缓动) 关注:11147
- 【※】返回式滚动效果、鼠标触发延时、秒数简化设置应用实例 关注:9456
- 【※】宽度百分比设置应用实例 关注:8242
- 图文类应用实例演示
- DIV + CSS(UL + LI)间歇滚动应用实例(缓动) 关注:24217
- DIV + CSS向左翻屏滚动、缓动及跳过等待时间图文混排实例 关注:20477
- DIV + CSS(UL + LI)图片轮换滑动门应用实例(缓动) 关注:19248
- DIV + CSS、Slide幻灯片(切入效果 + 页码)实例(缓动) 关注:16948
- 新浪微博渐入渐显效果演示 关注:14299
- Slide幻灯片滚动 + 页码 + 标题(缓动) 关注:13965
- 【※】新浪微博渐入非渐显效果演示 关注:10010
- 高级应用实例演示
- DIV + CSS开始等待、间歇滚动、TAB点击切换、点击控制左右滑动实例(缓动) 关注:22876
- QQ图片轮显高级应用实例 关注:17677
- 百度知道渐显效果应用实例 关注:15274
- 京东渐显效果 关注:14533
- 淘宝网综合应用实例 关注:13445
- 淘宝广告应用实例3 静止、点击滚动 关注:12316
- 淘宝广告应用实例 关注:11935
- Slide幻灯片滚动、缩略图、标题实例演示(缓动) 关注:11641
- 淘宝广告应用实例2(多TAB支持) 关注:11351
- 【※】缩略图、渐隐渐显效果应用实例 关注:10993
- 图片、标题、描述、页码切换实例 关注:10282
- 【※】滚动距离设置、开始等待、间歇滚动、TAB点击切换、点击控制左右滑动实例(缓动) 关注:10011
- 【※】DIV+CSS 渐隐渐显应用实例 关注:9976
- Slide幻灯片滚动、缩略图、标题实例演示2(缓动) 关注:9914
- 【※】页码自动修正、开始等待、间歇滚动、TAB点击切换、点击控制左右滑动实例(缓动) 关注:9647
- Banner宣传效果案例 关注:9528
- 缩略图、纵向滚动应用效果演示 关注:9486
- 【※】DIV+CSS 即时切换、函数直接调用应用实例(淘宝广告应用) 关注:9237
- 八向滚动应用实例 关注:9020
- 【※】节点自适应滚动应用实例(实例为2个节点为一滚动单位) 关注:8997
- 暂停、继续控制实例演示 关注:8711
入门
想要使用这款组件，需要页面引入 MSClass.js 核心文件，该文件在您的HTML文档<head>标签之内。
参数直接赋值法：
参数动态赋值法：
对象直接赋值法：
使用建议：
- 对于复杂/高级应用推荐使用"<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版权信息的基础上随意使用，包括商业应用。
浙公网安备 33010602011771号