js跑马灯效果 MSClass.js 多行跑马灯溢出隐藏可判断手机端-智软设计工作室

智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司，宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务，优惠的价格，深的客户信赖。相信有你的加入我们的明天会更有动力！期待与你合作！

2014已经悄然到来，在新的一年我们恭贺所有客户事业蒸蒸日上，同事庆祝智软设计工作室成立5周年，在5周年为众多客户提供了保质量的网站设计与网站制作。我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务！期待与你合作
智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格，最优质的质量，最突出的设计！得到了客户的一致认可,我们的服务包括：宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!
点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解
2014开幕，宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格
智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新，让新老客户更好的看到我们做的案例，点击查看我们做的网站案例吧！
智软(宁波网络公司)帮你轻松解决网络问题，网站一站式解决方案

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

2022-04-29 14:39:18

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、针对横向滚动的文字段落，如果最末端是以空格" "结束的，请将空格" "转换成" "

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

下载：

MSClass.js.rar