现在位置:首页 » 网页设计 »

关于封装js滚动MSCLASS的相关使用说明

心岛发布于2019年10月07日  分类: 网页设计  浏览:23 人次  评论:0 

之前msclass封装js脚本为网页制作者所喜爱,但是近期发现该脚本的官方网站貌似关闭了,为了以后使用方便,本博将搜集到的相关使用方法分享大家:

一、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

二、赋值方法

参数直接赋值法:

<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>
三、使用方法

1、首先调用msclass封装代码:
<script src="images/MSClass.js" type="text/javascript"></script>

2、在需要滚动的页面body标签范围内插入如下代码


代码设置说明:
<script type="text/javascript">
new Marquee(
{
    MSClass      : ["CSSBox","CSSContent"],
    Direction : 2,
    PrevBtnID : "LeftButton",
    NextBtnID : "RightButton",
    Step      : 0.3,
    Width      : 583,
    Height      : 402,
    Timer      : 20,
    DelayTime : 3000,
    WaitTime  : 0,
    ScrollStep: 583,
    SwitchType: 0,
    AutoStart : true
});
</script>
上述代码大家可根据实际调整,相关参数参照第一部分内容。

注意事项:

1、相关ID要匹配正确,参数要设置得当,尤其是在设置滚动前要将需要滚动内容的样式表设置好,滚动后不方便调整样式。

2、在设置MsclassID、ContentID后,一定要在MsclassID外层再额外嵌套一个DIV标签,由于封装js会默认给这两个ID外层内容增加一些样式,因此如果不增加这一标签,将可能造成滚动范围扩大,而影响前端显示。如下图所示:

msclass封装js使用注意事项.jpg

赞 (0次) 打赏
X
打赏方式:
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫

本文由心岛原创或编辑,转载请保留链接【关于封装js滚动MSCLASS的相关使用说明】https://www.liangxin.name/?post=1178
百度已收录!
本文标签: 代码修改 网站建设 方法 MSclass
上一篇: 齐博整站系统导航栏扩容的方法
下一篇:关于齐博V7整站系统在首页调用全部栏目的方法
目前有 0 条评论