Marquee Scroll图片（文字）不间断滚动类

介绍

MSClass,是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字的滚动/切入/渐显等效果,同时支持横向/竖向/连续/间断/缓动等多种形式。

入门

想要使用这款组件，需要页面引入 MSClass.js 核心文件，该文件在您的HTML文档<head>标签之内。

<script type="text/javascript" src="/path/MSClass.js"></script>




参数直接赋值法：


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



对象直接赋值法：


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



配置


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






示例



使用建议：


    

  • 对于复杂/高级应用推荐使用”<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)的形式来达到同等的效果
    • 

  • 针对横向滚动的文字段落，如果最末端是以空格” “结束的，请将空格” “转换成”&nbsp;”
    • 

  • 鼠标悬停滚动思想源自Flash，所以有一定的局限性(容器内仅允许用图片<img>或者带链接的图片<a><img></a>的形式，并需要禁止其自动换行)
    • 

  • 若用户有隐藏区域的应用(display=none)，应在此脚本生效后，动态将该区域设置成不显示方可生效，或者通过”对象直接赋值法”将隐藏区域ID传递给HiddenID
    • 




              

                

                    
    
                        
  • Tags:
    • 
                    

                

			                        

            

            

        

            

            

        




	
目前有1 条留言

	
    
	   
  1. 
   
    
      
   
    
   	
    
    
    
    		
    2011年12月13日 下午 12:29						
											不着调											
					  |  引用  |  #1     
    
			
    太复杂了，看不懂！
    

    
			
    [回复]
    
            
    
    
    

    

    2. 	

 	



		


  

            	

                



发表评论



		
			
		







 	

		

        

		
        

		

    



    






为了您的身体健康、潇洒、美丽、帅气，请不要灌水。




 / 快捷键：Ctrl+Enter