后退 刷新 前进 收藏 顶部 |   知道 黑匣子 富媒体 技术服务

无敌JS滚动代码函数msclass，（上下右左，间歇）无所不能 marquee

程序猿 JS 无敌 JS滚动 msclass marquee... (shuke.2013-06-11 09:32)
创建实例:
//参数直接赋值法
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>的形式，并需要禁止其自动换行）
2 楼 shuke[2013-06-11 13:47]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 滚动无敌 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="shuke">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
 </HEAD>
<script language="javascript" src="msclass.js" type="text/javascript"></script>

<style type="text/css">
body{margin:auto;font-size:12px; line-height:25px;}
*{margin:0;padding:0;border:none}
#tabcontent{  width:970px; border:gray solid 5px;}
 
ul#sbox li a{padding:5px;}
ol{padding:30px;}
</style>

 <BODY>
<div id="tabcontent" >
        <div id="hottitle"  >
            <ul id="sbox">
<li><a href="/huanjing/" target="_blank"><img src="http://gan0871.wj1120.com/uploadfile/2012/1109/20121109045411466.jpg" alt="医院环境" /></a></li>
<li><a href="/huanjing/" target="_blank"><img src="http://gan0871.wj1120.com/uploadfile/2012/1206/2012-11-24-240.jpg" alt="医院环境" /></a></li>
<li><a href="/huanjing/" target="_blank"><img src="http://gan0871.wj1120.com/uploadfile/2012/1206/2012-11-24-243.jpg" alt="医院环境" /></a></li>
<li><a href="/huanjing/" target="_blank"><img src="http://gan0871.wj1120.com/uploadfile/2012/1206/2012-11-24-247.jpg" alt="医院环境" /></a></li>
<li><a href="/huanjing/" target="_blank"><img src="http://gan0871.wj1120.com/uploadfile/2012/1206/2012-11-24-248.jpg" alt="医院环境" /></a></li>
<li><a href="/huanjing/" target="_blank"><img src="http://gan0871.wj1120.com/uploadfile/2012/1206/2012-11-24-249.jpg" alt="医院环境" /></a></li>
<li><a href="/huanjing/" target="_blank"><img src="http://gan0871.wj1120.com/uploadfile/2012/1206/2012-11-24-250.jpg" alt="医院环境" /></a></li>
<li><a href="/huanjing/" target="_blank"><img src="http://gan0871.wj1120.com/uploadfile/2012/1206/2012-11-24-251.jpg" alt="医院环境" /></a></li>
<li><a href="/huanjing/" target="_blank"><img src="http://gan0871.wj1120.com/uploadfile/2012/1206/2012-11-24-252.jpg" alt="医院环境" /></a></li>
            </ul>
         </div>
        </div>
 <script language=javascript>new Marquee(["hottitle","sbox"],2,3,970,170,30,0,0,0);  </script>
  <ol>NEW MARQUEE函数解析：
	<li>[]方框里的是两个主ID都有效果。	</li>
	<li>0：上，1：下，2：左，3：右。	</li>
	<li>数字越大，速度越快。	</li>
	<li>高	</li>
	<li>宽	</li>
	<li>间歇停顿延迟时间(可选,默认为0不停顿,1000=1秒)	</li>
	<li>	</li>
	<li>	</li>
	<li>延迟S	</li>
  </ol>
 <div id=link_logo1 style="OVERFLOW: hidden;width:500px;background:#efefef">
<ul>
<li>  赵**   脂肪肝  盘龙区    预约已成功</li>
<li>  衡**   大三阳  西山区    预约已成功</li>
<li>  库**   酒精肝    嵩明县   预约已成功</li>
<li>  王**   丙肝   富民县    预约已成功</li>
<li>  王**   肝腹水  晋宁县   预约已成功</li>
<li>  叶**   脂肪肝   东川区    预约已成功</li>
<li>  李**   急性肝炎  五华区   预约已成功</li>
<li>  刘**   小三阳   宜良县    预约已成功</li>
<li>  郭**   黄疸肝炎  官渡区   预约已成功</li>
</ul>
</div>
<script type="text/javascript">new Marquee("link_logo1",0,1,500,76,30,0,2000,80);</script>
 </BODY>
</HTML>


3 楼 shuke[2013-06-28 16:39]
 <div id="shuke" class="box" style="float:right">
 
<A HREF=""> <img src="http://t100.qpic.cn/mblogpic/9f785e186d867932cd8e/460.jpg" height="250"></A><BR />
 <A HREF=""><img src="http://t100.qpic.cn/mblogpic/1717719c85f9f1efc4aa/460.jpg" height="250"></A><Br />
 <A HREF=""><img src="http://t100.qpic.cn/mblogpic/46c6e81e02d13c47a70c/460.jpg" height="250"></A><Br />
</div>
<script type="text/javascript">new Marquee("shuke",0,1,500,500,30,0,1000,0);</script>
<!-- ID｛shuke｝,方向{上下左右}，移动大小px/S｛2px｝，高{300}，宽{100}，定时器{平滑30}，间歇停顿是否可以拖动{1s}，开始等待｛1s｝,滚动间距｛-1禁止鼠标控制｝-->

 <div id="shuke2" class="box">
 
<A HREF=""> <img src="http://t100.qpic.cn/mblogpic/9f785e186d867932cd8e/460.jpg" width="250"></A>
 <A HREF=""><img src="http://t100.qpic.cn/mblogpic/1717719c85f9f1efc4aa/460.jpg" width="250"></A>
 <A HREF=""><img src="http://t100.qpic.cn/mblogpic/46c6e81e02d13c47a70c/460.jpg" width="250"></A>
<A HREF=""> <img src="http://t100.qpic.cn/mblogpic/9f785e186d867932cd8e/460.jpg" width="250"></A>
 <A HREF=""><img src="http://t100.qpic.cn/mblogpic/1717719c85f9f1efc4aa/460.jpg" width="250"></A>
 <A HREF=""><img src="http://t100.qpic.cn/mblogpic/46c6e81e02d13c47a70c/460.jpg" width="250"></A>
</div>
<script type="text/javascript">new Marquee("shuke2",2,250,750,250,2000,0,1000,0);</script>


4 楼 shuke[2013-09-02 18:20]
  容器ID,滚动方向,步长,宽度,高度，定时器30,间歇,等待,间距 -->

也就是说，在 “等待“ 多少时间后，多少 ”长宽“ 的 ”容器“ 以什么 ”方向“ ，

以多少 ”步长“ 滚动。滚动过程中，以是”间距“多少进行”间歇“ 多少秒。

”定时器“就是第个步长所用的时间。
5 楼 shuke[2016-06-12 18:18]
TABLE滚动特效：
<div id="mq_a">
<table  class="table table-responsive">
    <tbody id="mq_a1">
    <tr>
        <td>184****2132</td>
        <td>16年6月8日</td>
    </tr>
 function sk_marquee(a,b,c){
     var demo=document.getElementById(a);
     var demo1=document.getElementById(b);
     var demo2=document.getElementById(c);
     var speed=50;
     demo2.innerHTML=demo1.innerHTML;
     function Marquee(){
         if(demo2.offsetTop-demo.scrollTop<=0)
             demo.scrollTop-=demo1.offsetHeight
         else{
             demo.scrollTop++
         }
     }
     var MyMar=setInterval(Marquee,speed);
     demo.onmouseover=function() {clearInterval(MyMar)}
     demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 }
sk_marquee('mq_a','mq_a1','mq_a2');
sk_marquee('mq_b','mq_b1','mq_b2');
进度：100% 返回程序猿

解决织梦图集中上传图片时跳出302错误
js无敌选项卡EasyTabs change byshuke

图片新热点

导航


目录


    关于我们ABOUT SHUKE
    微博关注我们点击关注
    Copyright coolneng.com © Users from .
    站内搜索
    首页 | W3C | ME