js跑马灯效果 MSClass.js 多行跑马灯 溢出隐藏 可判断手机端

js跑马灯效果 MSClass.js 多行单行都可以，跑马灯 溢出隐藏  可判断手机端

<style type="text/css">

#news-container li{
	float: left;
	list-style-type: none; padding:10px; width:25%;
}

@media screen and (min-width: 320px) and (max-width: 480px){
#news-container li{
	float: left;
	list-style-type: none; padding:10px; width:46%;
}

}
</style>
  <script src="/MSClass.js"></script>
  
  
  
      <div id="marqueediv1" style="width:100%;  margin: 0 auto;height:350px;overflow:hidden;">
<div  id="news-container">

<ul>
{pboot:list scode=46 num=100 order=date}
   
      <li><a href="#">[list:title]</a></li>
    	{/pboot:list}


</ul>
</div>
</div>


<script defer>

function IsPC(){  
     var userAgentInfo = navigator.userAgent;
     var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
     var flag = true;  
     for (var v = 0; v < Agents.length; v++) {  
         if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
     }  
     return flag;  
  }

/*
var marquee1=new Marquee("textnomouse")
marquee1.ScrollStep=-1;
marquee1.Start();
*/

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent);  
    new Marquee("marqueediv1",0,1,300,350,50,4000,500)
} else if (/(Android)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent); 
    new Marquee("marqueediv1",0,1,300,350,50,4000,500)
} else {
new Marquee("marqueediv1",0,1,1100,350,50,4000,500)
};



</script>

MSClass.js 使用方法。和参数介绍

创建实例:

//参数直接赋值法

new Marquee("marquee")

new Marquee("marquee","top")

......

new Marquee("marquee",0,1,760,52)

new Marquee("marquee","top",1,760,52,50,5000)

......

new Marquee("marquee",0,1,760,104,50,5000,3000,52)

new Marquee("marquee",null,null,760,104,null,5000,null,-1)

//参数动态赋值法

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();

参数说明:

ID"marquee"容器ID(必选)

Direction(0)滚动方向(可选,默认为0向上滚动) 可设置的值包括:0,1,2,3,"top","bottom","left","right" (0向上 1向下 2向左 3向右)

Step(1)滚动的步长(可选,默认值为2,数值越大,滚动越快)

Width(760)容器可视宽度(可选,默认值为容器初始设置的宽度)

Height(52)容器可视高度(可选,默认值为容器初始设置的高度)

Timer(50)定时器(可选,默认值为30,数值越小,滚动的速度越快,1000=1秒,建议不小于20)

DelayTime(5000)间歇停顿延迟时间(可选,默认为0不停顿,1000=1秒)

WaitTime(3000)开始时的等待时间(可选,默认或0为不等待,1000=1秒)

ScrollStep(52)间歇滚动间距(可选,默认为翻屏宽/高度,该数值与延迟均为0则为鼠标悬停控制,-1禁止鼠标控制)

　使用建议:

1、建议直接赋予容器的显示区域的宽度和高度，如(<div id="marquee" style="width:760px;height:52px;">......</div>)

2、建议为容器添加样式overflow = auto，如(<div id="marquee" style="width:760px;height:52px;overflow:auto;">......</div>)

3、为了更准确的获取滚动区域的宽度和高度，请尽可能将各滚动单位直接赋予正确宽高度

4、对于TABLE标记的横向滚动，需要对TABLE添加样式display = inline，如(<div id="marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">......</table></div>)

5、对于翻屏滚动或间歇滚动，要注意各滚动单位间的间距，同时需要对容器的可视高度和可视宽度做好准确的设置，对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整

6、对于LI自动换行的问题暂时没有更好的解决办法，建议将其转换成表格(TABLE)的形式来达到同等的效果

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

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

下载：

MSClass.js.rar