一、可以直接使用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; width: 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>