HTML+JS实现网站公告信息滚动显示

一、可以直接使用marquee标签来实现

注意：

这个标签首先在早期的IE版本中加进来，后来逐渐被其他浏览器支持，W3C的不建议使用它。

<marquee>在HTML和HTML5中都属于废弃的特性，建议不要使用这个标签，建议使用JS实现。

该标签的相关属性：

align设定标签内容的对齐方式
absbottom：绝对底部对齐（与g、p等字母的最下端对齐）
absmiddle：绝对中央对齐
baseline：底线对齐
bottom：底部对齐（默认）
left：左对齐
middle：中间对齐
right：右对齐
texttop：顶线对齐
top：顶部对齐

direction设定活动字幕的滚动方向，默认为left
up：向上
down：向下
left：向左
right：向右

behavior设定滚动的方式，默认为scroll
scroll：表示由一端滚动到另一端，循环滚动。
alternate：表示在两端之间来回交替进行滚动。
slide：表示由一端滚动到另一端，只滚动一次就停止。

scrollamount设定活动字幕的滚动速度，单位pixels（像素）。

scrolldelay设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒）。

loop设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1。

width、height规定滚动字幕的矩形区域的宽度和高度。

bgcolor设定滚动范围内的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设定。

hspace设定活动字幕里所在的位置距离父容器水平边框的距离，即滚动范围左右的空白空间。

vspace设定活动字幕里所在的位置距离父容器垂直边框的距离，即滚动范围上下的空白空间。

onMouseOut="this.start();" 鼠标移开后开始滚动。

onMouseOver="this.stop();" 鼠标放上去后停止滚动。

示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>marquee标签滚动</title>
 6 </head>
 7 <body>
 8     <div>
 9         <marquee align="right" 
10                  direction="up" 
11                  behavior="scroll" 
12                  scrollamount="10" 
13                  scrolldelay="0" 
14                  loop="-1" 
15                  width="1000" 
16                  height="30" 
17                  bgcolor="#0099FF" 
18                  hspace="10" 
19                  vspace="10" 
20                  onMouseOut="this.start();" 
21                  onMouseOver="this.stop();">
22             这里是滚动的内容
23         </marquee>
24     </div>
25 </body>
26 </html>

上面的代码实现的滚动不是无缝滚动，添加contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"可以实现首尾相连的滚动效果（无缝滚动），但是仅IE有效，其他浏览器还是首尾不连的，示例代码如下：

1 <marquee behavior="scroll" 
2          contenteditable="true" 
3          onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" 
4          scrollamount="3" 
5          width="100">
6 　　这里是要滚动的内容
7 </marquee>

二、使用js来控制滚动内容，可以直接实现无缝滚动

用到的DOM对象属性：

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

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

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

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

scrollWidth: 获取对象的滚动宽度。

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

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

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

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

setInterval(code,millisec)方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。参数 code 必需。要调用的函数或要执行的代码串。参数 millisec 必需。周期性执行或调用 code 之间的时间间隔，以毫秒计。返回值是一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>横向无缝滚动</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6 </head>
 7 <body>
 8     <div>站内公告</div>
 9     <hr/>
10     <div id="demo" style="overflow: hidden;  860px; align: center">
11         <table cellspacing="0" cellpadding="0" align="center" border="0">
12             <tbody>
13                 <tr>
14                     <td id="marquePic1" valign="top">
15                         <table width="1800px">
16                             <tr>
17                                 <td>第1个单元格</td>
18                                 <td>第2个单元格</td>
19                                 <td>第3个单元格</td>
20                                 <td>第4个单元格</td>
21                                 <td>第5个单元格</td>
22                                 <td>第6个单元格</td>
23                                 <td>第7个单元格</td>
24                                 <td>第8个单元格</td>
25                                 <td>第9个单元格</td>
26                                 <td>第10个单元格</td>
27                             </tr>
28                         </table>
29                     </td>
30                     <td id="marquePic2" valign="top">
31                     </td>
32                 </tr>
33             </tbody>
34         </table>
35     </div>
36 </body>
37 </html>
38 <script type="text/javascript"> 
39     //横向滚动 需要设置div的宽度
40     var speed=30 
41     marquePic2.innerHTML=marquePic1.innerHTML 
42     function Marquee(){ 
43         if(demo.scrollLeft>=marquePic1.scrollWidth){ 
44             demo.scrollLeft=0 
45         }else{ 
46             demo.scrollLeft++ 
47         }
48     } 
49     var MyMar=setInterval(Marquee,speed) 
50     demo.onmouseover=function() {clearInterval(MyMar)} 
51     demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
52 </script>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>纵向无缝滚动</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6 </head>
 7 <body>
 8     <div>站内公告</div>
 9     <hr/>
10     <div id="demo" style="OVERFLOW: hidden; height: 100px;">
11         <div id="marquePic1">
12             第1行<br/>
13             第2行<br/>
14             第3行<br/>
15             第4行<br/>
16             第5行<br/>
17             第6行<br/>
18             第7行<br/>
19             第8行<br/>
20             第9行<br/>
21             第10行
22         </div>        
23         <div id="marquePic2" valign="top">
24         </div>
25     </div>
26 </body>
27 </html>
28 <script type="text/javascript"> 
29     //纵向滚动 需要设置div的高度
30     var speed=30 
31     marquePic2.innerHTML=marquePic1.innerHTML 
32     function Marquee(){ 
33         if(demo.scrollTop>=marquePic1.scrollHeight){ 
34             demo.scrollTop=0 
35         }else{ 
36             demo.scrollTop++ 
37         }
38     } 
39     var MyMar=setInterval(Marquee,speed) 
40     demo.onmouseover=function() {clearInterval(MyMar)} 
41     demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
42 </script>