滚动字幕的制作

无论是在做网站或者做Web应用程序的时候我们经常需要用到滚动字幕来反映一些信息，那么做滚动字幕有很多种方法，

各参数详解：   

  a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。   
  b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。   
  c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。   
  d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。   
  e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)     
  3.实例：   
  代码是     
  <marquee   diriction="right"   scrollAmount=3   behavior="alternate"   width=100%   height=100%>aaaaa</marquee>

我在网上看到一篇关于marquee无缝滚动的文章，写的很好，也很详细，这里转载一下，同时感谢原作者的总结和分享。

先了解一下对象的几个的属性：

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

向上滚动的代码:

 

Code
 1 <style type="text/css">
 2 <!--
 3   #demo {
 4   background: #FFF;
 5   overflow:hidden;
 6   border: 1px dashed #CCC;
 7   height: 100px;
 8   text-align: center;
 9   float: left;
10   }
11   #demo img {
12   border: 3px solid #F2F2F2;
13   display: block;
14   }
15 -->
16 </style>
17 向上滚动
18 <div id="demo">
19 <div id="demo1">
20 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
21 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
22 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
23 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
24 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
25 </div>
26 <div id="demo2"></div>
27 </div>
28 <script>
29 <!--
30   var speed=10; //数字越大速度越慢
31   var tab=document.getElementById("demo");
32   var tab1=document.getElementById("demo1");
33   var tab2=document.getElementById("demo2");
34   tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
35   function Marquee(){
36   if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
37   tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
38   else{
39     tab.scrollTop++
40       }
41   }
42   var MyMar=setInterval(Marquee,speed);
43   //鼠标移上时清除定时器达到滚动停止的目的
44   tab.onmouseover=function() {clearInterval(MyMar)};
45   tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
46 -->
47 </script>

向下滚动的代码:

 

Code
 1 <style type="text/css">
 2 <!--
 3   #demo {
 4   background: #FFF;
 5   overflow:hidden;
 6   border: 1px dashed #CCC;
 7   height: 100px;
 8   text-align: center;
 9   float: left;
10   }
11   #demo img {
12   border: 3px solid #F2F2F2;
13   display: block;
14   }
15 -->
16 </style>
17 向下滚动
18 <div id="demo">
19 <div id="demo1">
20 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
21 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
22 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
23 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
24 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
25 </div>
26 <div id="demo2"></div>
27 </div>
28 <script>
29 <!--
30   var speed=10; //数字越大速度越慢
31   var tab=document.getElementById("demo");
32   var tab1=document.getElementById("demo1");
33   var tab2=document.getElementById("demo2");
34   tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
35   tab.scrollTop=tab.scrollHeight
36   function Marquee(){
37   if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
38   tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
39   else{
40     tab.scrollTop--
41     }
42   }
43   var MyMar=setInterval(Marquee,speed);
44   //鼠标移上时清除定时器达到滚动停止的目的
45   tab.onmouseover=function() {clearInterval(MyMar)};
46   tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
47 -->
48 </script>

向左滚动的代码:

 

Code
 1 <style type="text/css">
 2 <!--
 3   #demo {
 4     background: #FFF;
 5     overflow:hidden;
 6     border: 1px dashed #CCC;
 7     width: 500px;
 8   }
 9   #demo img {
10     border: 3px solid #F2F2F2;
11   }
12   #indemo {
13     float: left;
14     width: 800%;
15   }
16   #demo1 {
17     float: left;
18   }
19   #demo2 {
20     float: left;
21   }
22 -->
23 </style>
24 向左滚动
25 <div id="demo">
26 <div id="indemo">
27 <div id="demo1">
28 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
29 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
30 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
31 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
32 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
33 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
34 </div>
35 <div id="demo2"></div>
36 </div>
37 </div>
38 <script>
39 <!--
40   var speed=10; //数字越大速度越慢
41   var tab=document.getElementById("demo");
42   var tab1=document.getElementById("demo1");
43   var tab2=document.getElementById("demo2");
44   tab2.innerHTML=tab1.innerHTML;
45   function Marquee(){
46   if(tab2.offsetWidth-tab.scrollLeft<=0)
47   tab.scrollLeft-=tab1.offsetWidth
48   else{
49   tab.scrollLeft++;
50     }
51   }
52   var MyMar=setInterval(Marquee,speed);
53   tab.onmouseover=function() {clearInterval(MyMar)};
54   tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
55 -->
56 </script>

向右滚动的代码:

 

Code
 1 <style type="text/css">
 2 <!--
 3   #demo {
 4     background: #FFF;
 5     overflow:hidden;
 6     border: 1px dashed #CCC;
 7     width: 500px;
 8   }
 9   #demo img {
10     border: 3px solid #F2F2F2;
11   }
12   #indemo {
13     float: left;
14     width: 800%;
15   }
16   #demo1 {
17     float: left;
18   }
19   #demo2 {
20     float: left;
21   }
22 -->
23 </style>
24 向右滚动
25 <div id="demo">
26 <div id="indemo">
27 <div id="demo1">
28 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
29 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
30 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
31 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
32 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
33 <a href="#"><img src="/ggao/weste.net5.88.31.gif" border="0" /></a>
34 </div>
35 <div id="demo2"></div>
36 </div>
37 </div>
38 <script>
39 <!--
40   var speed=10; //数字越大速度越慢
41   var tab=document.getElementById("demo");
42   var tab1=document.getElementById("demo1");
43   var tab2=document.getElementById("demo2");
44   tab2.innerHTML=tab1.innerHTML;
45   function Marquee(){
46   if(tab.scrollLeft<=0)
47   tab.scrollLeft+=tab2.offsetWidth
48   else{
49     tab.scrollLeft--
50     }
51   }
52   var MyMar=setInterval(Marquee,speed);
53   tab.onmouseover=function() {clearInterval(MyMar)};
54   tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
55 -->
56 </script>

 

如果谁有更好的方法或者由什么好的建议欢迎与我交流。我的QQ:356353290.

转载于:https://www.cnblogs.com/kyle_chen/archive/2009/01/08/1365532.html