<marquee>知識點 現在這個標簽不主張使用，因為不符合w3c標準（結構、樣式、行為）功能性分離。 1.behavior滾動的方式 【alternate】：表示在兩端之間來回滾動 【scroll】：表示由一端滾動到另一端，會重覆 【slide】：表示由一端滾動到另一端，不會重覆 2.direct ...
<marquee>知識點 現在這個標簽不主張使用，因為不符合w3c標準（結構、樣式、行為）功能性分離。 1.behavior滾動的方式 【alternate】：表示在兩端之間來回滾動 【scroll】：表示由一端滾動到另一端，會重覆 【slide】：表示由一端滾動到另一端，不會重覆 2.direction滾動的方向 【down】、【up】、【left】、【right】 3.loop滾動的次數（當loop=-1表示一直滾動下棋，預設為-1） 4.scrollamount設定活動字幕的滾動速度 5.scrolldelay設定活動字幕滾動兩次之間的延遲時間
1 <marquee loop="-1" onmouseover="this.stop();" onmouseout="this.start();"></marquee>
用javascript實現
html
1 <div id="moocBox"> 2 <ul id="con1"> 3 <li><a href="#">1.學會html5 絕對的屌絲逆襲（案例）</a><span>2013-09-18</span></li> 4 <li><a href="#">2.tab頁面切換效果（案例）</a><span>2013-10-09</span></li> 5 <li><a href="#">3.圓角水晶按鈕製作（案例）</a><span>2013-10-21</span></li> 6 <li><a href="#">4.HTML+CSS基礎課程(系列)</a><span>2013-11-01</span></li> 7 <li><a href="#">5.分頁頁碼製作（案例）</a><span>2013-11-06</span></li> 8 <li><a href="#">6.導航條菜單的製作（案例）</a><span>2013-11-08</span></li> 9 </ul> 10 </div>
css
1 /* 中間樣式 */ 2 #moocBox { 3 height: 144px; 4 width: 335px; 5 margin-left: 25px; 6 margin-top: 10px; 7 overflow: hidden; /* 這個一定要加，超出的內容部分要隱藏，免得撐高中間部分 */ 8 }
javascript
1 var area = document.getElementById('moocBox'); 2 var con1 = document.getElementById('con1'); 3 var speed = 50; 4 area.scrollTop = 0; 5 con1.innerHTML += con1.innerHTML; 6 function scrollUp() { 7 if (area.scrollTop >= con1.scrollHeight/2) { 8 area.scrollTop = 0; 9 } else { 10 area.scrollTop++; 11 } 12 } 13 var myScroll = setInterval("scrollUp()", speed); 14 area.onmouseover = function () { 15 clearInterval(myScroll); 16 } 17 area.onmouseout = function () { 18 myScroll = setInterval("scrollUp()", speed); 19 }
