MSClass动画效果示范脚本

admin

一个新型动画脚本：http://www.superslide2.com/

硬盘位置：E:\XXXX系统\插件宝库\MsClass
容错极简版20190118：
DIV：
<div class="honor container p-y-60">$func_article(para=Honor,rows=10,title=10)$</div>
CSS：
#Box li{ display: inline-flex; flex-flow: column wrap; width:300px; height: 380px; margin-right:20px;}
#Box li .thumbs,#Box li .thumbs a{ display: flex; justify-content: center; align-items: center; height: calc(100% - 40px);}
#Box li .thumbs img{ max-width:100%; max-height: 100%; width: auto; height: auto;}
#Box li > a{ display: block; line-height:40px; font-size:1rem; text-align: center;}
JS：
if($(".honor #ArticleView").length>0){
    $(".honor #ArticleView ul").attr("id","Box")
    $(".honor #ArticleView").attr("id","Slider")
    new Marquee(
    {
            MSClass : ["Slider","Box"],
            Direction : 2,
            Step : [0.5,"easeOutElastic"],//连续滚动设置为0
            Width : 1200,
            Height : 380,
            Timer : 1,
            DelayTime : 5000,//连续滚动设置为0
            WaitTime : 3000,
            ScrollStep: 320,//连续滚动可以删除
            AutoStart : 1
    });
}

DIV：
<div class="photo">$func_article(css=Photo,title=0,para=Corporate,rows=6)$</div>

CSS:
<!--全局适用于1100宽屏-->
#ArticleView ul li{ float:left; display:block; width:354px; height:300px; text-align:center; margin-right:16px; margin-bottom:20px; border:1px solid #ccc;}
#ArticleView ul li:nth-child(3n){ margin-right:0;}
#ArticleView ul li:hover{ border:1px solid #19af05;}
#ArticleView ul li img{ width:calc(100% - 20px); height:calc(100% - 60px); margin:10px;}
#ArticleView ul li .atext{ display:block; line-height:30px; height:30px;}
<!--版块调整长宽-->
.photo #ArticleView ul li{ width:378px; height:378px; margin:0;}

JS：
if(jQuery("#Photo #ArticleView").length>0){
        new Marquee(
        {
                MSClass : ["Photo","ArticleView"],
                Direction : "top",
                Step : [0.5,"easeOutElastic"],
                Width : 380,
                Height : 380,
                Timer : 1,
                DelayTime : 5000,
                WaitTime : 3000,
                ScrollStep: 380,
                AutoStart : 1
        });
}
此例应用于模板la(wuhula)

问题：如果出现两个同时滚动时，第二个动画失效！
解决办法：<div class="case">$func_article(sid=CaseBox,css=Case,title=0,para=Case,rows=6)$</div>红色部分为必须增加的部分，避免重复使用ArticleView的调用，动画如下：

if(jQuery("#Photo #ArticleView").length>0){
        new Marquee(
        {
                MSClass : ["CaseBox","Case"],
                Direction : "top",
                Step : [0.5,"easeOutElastic"],
                Width : 380,
                Height : 380,
                Timer : 1,
                DelayTime : 5000,
                WaitTime : 3000,
                ScrollStep: 380,
                AutoStart : 1
        });
}
红色部分使用了SID与CSS的自定义值，而不再使用ArticleView，注意sid的值在前。
特别提醒：以上适合于上下滚动，左右滚动会出现跳位现象，具体解法附后。

适用于左右滚动的思路是：用jquery的attr增加ID值，再调用new Marquee，代码如下：
DIV：
$func_product(navi=Navigator,css=Product,para=Product,title=10,rows=10,memo=2)$
JS：
if($("#Product #ProductView").length>0){
        $("#Product ul").attr("ID","SliderContent");//用JS来增补ID
        new Marquee(
        {
                MSClass : ["Product","SliderContent"],
                Direction : 2,
                Step :2,
                Width : 1200,
                Height : 300,
                Timer : 1,
                DelayTime : 1000,
                WaitTime : 1000,
                ScrollStep: 307,
                AutoStart : 1
        });
}

上文去CSS再简化写法：
CSS：
$func_product(navi=Navigator,para=Product,title=10,rows=10,memo=2)$
JS:
if($("#ProductView").length>0){
        $("#ProductView ul").attr("ID","SliderContent");
        new Marquee(
        {
                MSClass : ["ProductView","SliderContent"],
                Direction : 2,
                Step :2,
                Width : 1200,
                Height : 300,
                Timer : 1,
                DelayTime : 1000,
                WaitTime : 1000,
                ScrollStep: 307,
                AutoStart : 1
        });
}

admin

MSClass参数直接赋值法：
       new Marquee("Marquee",0,1,760,104,50,5000,3000,52)
       new Marquee("Marquee",null,null,760,104,null,5000,null,-1)

MSClass参数动态赋值法：
       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();

MSClass对象直接赋值法：
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 "],
                PrevBtnID : "LeftButton",
                NextBtnID : "RightButton",
                Direction : "top",
                Step : [0.4,"easeOutElastic"],
                Width : 760,
                Height : 52,
                Timer : 50,
                DelayTime : 5000,
                WaitTime : 3000,
                ScrollStep: 52,
                SwitchType: 0,
                AutoStart : 1
        });

admin

http://img.jb51.net/online/jsgundong/test.htm

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

admin

DIV：
<div class="matshow p-y-60"><div class="container">$func_product(navi=Navigator,css=Mat,title=20,para=Matshow,len=16,rows=8,more=MORE+,show=title|content|more)$</div></div>

CSS：
.matshow .Margin{ display:flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
#LeftButton{  display: flex; align-items: center; width: 20px; height: 160px; background:#ccc; margin-right:20px; border-radius: 8px;}
#RightButton{ display: flex; align-items: center; width: 20px; height: 160px; background:#ccc; margin-left:20px; border-radius: 8px;}
#LeftButton::before{ text-align: center; font-size: 20px; width: 20px; height: 20px;  content: '\f104'; color:#fff; font-family: fontawesome;}
#RightButton::before{ text-align: center; font-size: 20px; width: 20px; height: 20px; content: '\f105'; color:#fff; font-family: fontawesome;}

JS：
if ($(".matshow #ProductView").length > 0) {
  $(".matshow #Mat").before("<div id=\"LeftButton\"></div>");
  $(".matshow #Mat").after("<div id=\"RightButton\"></div>");
  new Marquee(
    {
      MSClass: ["Mat","ProductView"],
      PrevBtnID : "LeftButton",
      NextBtnID : "RightButton",
      Direction: 2,
      Step: .5,
      Width: "100%",
      Height: 220,
      Timer: 30,
      DelayTime: 1000,
      WaitTime: 1000,
      ScrollStep: 220,
      AutoStart: 1
    });
}

admin

hondy.js重要函数
var carousel = function () {
        if ($("carousel").length > 0) {
                $.getScript("../../../systhemes/js/msclass.js", function () {
                        var count = $("carousel").length;
                        for (var i = 0; i < count; i++) {
                                if (i == 0) {
                                        var ID = "";
                                } else {
                                        var ID = i
                                }
                                var MSClassID = $("carousel").eq(i).attr("sid");
                                if (MSClassID == undefined) {
                                        var MSClassID = "Carousel" + ID;
                                } else {
                                        MSClassID = MSClassID + ID
                                }
                                $("carousel").eq(i).find(".Margin ul").wrapAll("<div id='" + MSClassID + "'></div>");
                                var w = $("carousel").eq(i).find(".Margin").outerWidth();
                                var h = $("carousel").eq(i).find(".Margin li").outerHeight();
                                var step = w / responsive(w);
                                $("carousel").eq(i).find(".Margin li").css({
                                        width: step
                                });
                                $("carousel").eq(i).find(".Margin ul").css({
                                        "flex-wrap": "nowrap"
                                });
                                new Marquee({
                                        MSClass: [MSClassID, "BoxContent"],
                                        Direction: 2,
                                        Step: 2,
                                        Width: w,
                                        Height: h,
                                        Timer: 1,
                                        DelayTime: 1000,
                                        WaitTime: 1000,
                                        ScrollStep: step,
                                        AutoStart: 1
                                });
                        }
                        var resizeTimer = null;
                        $(window).bind('resize', function () {
                                if (resizeTimer) clearTimeout(resizeTimer);
                                resizeTimer = setTimeout(function () {
                                        for (var i = 0; i < count; i++) {
                                                $("carousel").eq(i).find("ul").closest("div").css({
                                                        width: $("carousel").eq(i).find(".Margin").outerWidth(),
                                                        height: $("carousel").eq(i).find(".Margin ul li").outerHeight()
                                                });
                                        }
                                }, 500);
                        });
                });
        }
}