歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術！
CSS手冊 CSS3手冊 CSS論壇 CSS培訓 CSS任務 網聞
DIVCSS5培訓 系統快速學會CSS布局技術！
DIVCSS5首頁 > DIV+CSS模塊 >

div+css不間斷上下滾動模板

div+css不間斷上下滾動模板

這里會用到js，這里直接拷貝使用即可。
常常我們會看見別人網頁上使用上下不間斷文字特效來展示公告、廣告等內容，接下來我們將此css模板給大家。

效果圖如下
div+css不間斷滾動CSS代碼最終效果演示圖
不間斷滾動代碼效果圖

CSS 代碼如下：

 <style type="text/css">
/* CSS代碼如下 www.rs2pl.com */
body{ margin:0; padding:0; text-align:center; font-size:12px;}/* 設置網頁內容居中及字體大小 */
.modu{ margin:10px auto; height:15px; text-align:left; line-height:15px; width:400px;}/* 設置居中的“modu”寬度、高度文字局左等CSS屬性選擇器 這里的高度要與JS里的高度一致，以免滾動就會造成因高度不一致而使網頁錯位 */
.modu img{ vertical-align:middle;}
.lf{ float:left; width:80px;}/* 設置局左浮動 */
.rt{ float:right; width:315px; overflow:hidden;}/* 設置局右浮動 */
</style>

說明以上CSS代碼設置了一個box“modu”，然后內部分為左右結構，左邊是“滾動消息”標題(lf)，右邊是滾動內容（rt），直接放入html網頁里的頭部標簽“head”即可。

Html代碼：

  1.  <p>&nbsp;</p> 
  2. <p>divcss5模板-上下不間斷滾動<a href="http://www.rs2pl.com/">DIV+CSS</a></p> 
  3. <div class="modu"> 
  4. <div class="lf"><img src="images/news.gif" alt="" width="11" height="11" /> 滾動消息：</div> 
  5. <div class="rt"> 
  6. <script type="text/javascript"> 
  7. var marqueeContent=new Array(); //滾動主題 
  8.  
  9. marqueeContent[0]='<a href="http://www.rs2pl.com/" target="_blank">
  10. + CSS學習網,DIV+CSS基礎系統掌握CSS</a>'; 
  11. marqueeContent[1]='<a href="http://www.rs2pl.com/" target="_blank">
  12. + 顯而易見，最高的效率就是對現有材料的最佳利用。</a>'; 
  13. marqueeContent[2]='<a href="http://www.rs2pl.com/" target="_blank">
  14. + 自己能解決的事，別花錢，花錢能解決的事，別求人。</a>'; 
  15. marqueeContent[3]='<a href="http://www.rs2pl.com/" target="_blank">
  16. + 旅行是需要一種心情，更重要的是，需要一種沖動。</a>'; 
  17. marqueeContent[4]='<a href="http://www.rs2pl.com/" target="_blank">
  18. + 隨時用零碎的時間(如等人、排隊等)做零碎的事情。</a>'; 
  19. var marqueeInterval=new Array(); //定義一些常用而且要經常用到的變量 
  20. var marqueeId=0; 
  21. var marqueeDelay=4000; 
  22. var marqueeHeight=15;//注意這里設置每次滾動高度 
  23. function initMarquee() { 
  24. var str=marqueeContent[0]; 
  25. document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px"
  26.  onmouseover="clearInterval(marqueeInterval[0])" 
  27. onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>
  28. '+str+'</div></div>'); 
  29. marqueeId++; 
  30. marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); 
  31. } 
  32. function startMarquee() { 
  33. var str=marqueeContent[marqueeId]; 
  34. marqueeId++; 
  35. if(marqueeId>=marqueeContent.length) marqueeId=0; 
  36. if(marqueeBox.childNodes.length==1) { 
  37. var nextLine=document.createElement('DIV'); 
  38. nextLine.innerHTML=str; 
  39. marqueeBox.appendChild(nextLine); 
  40. } 
  41. else { 
  42. marqueeBox.childNodes[0].innerHTML=str; 
  43. marqueeBox.appendChild(marqueeBox.childNodes[0]); 
  44. marqueeBox.scrollTop=0; 
  45. } 
  46. clearInterval(marqueeInterval[1]); 
  47. marqueeInterval[1]=setInterval("scrollMarquee()",10); 
  48. } 
  49. function scrollMarquee() { 
  50. marqueeBox.scrollTop++; 
  51. if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight){ 
  52. clearInterval(marqueeInterval[1]); 
  53. } 
  54. } 
  55. initMarquee(); 
  56. </script> 
  57. </div> 
  58. </div> 

說明：以上內容放置在html的body內的div代碼及JS，這里不介紹JS，直接按位置拷貝即可使用。

最后綜合完整的div+css滾動模板網頁源代碼如下：

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <meta content="" name="keywords" /> 
  6. <title>文字滾動消息廣告代碼,廣告代碼下載-www.rs2pl.com</title> 
  7. <style type="text/css"> 
  8. /* CSS代碼如下 www.rs2pl.com */ 
  9. body{ margin:0; padding:0; text-align:center; font-size:12px;} 
  10. .modu{ margin:10px auto; height:15px; text-align:left;
  11. line-height:15px; width:400px;} 
  12. .modu img{ vertical-align:middle;} 
  13. .lf{ float:left; width:80px;} 
  14. .rt{ float:right; width:315px; overflow:hidden;} 
  15. </style> 
  16. </head> 
  17. <body> 
  18. <p>&nbsp;</p> 
  19. <p>divcss5模板-上下不間斷滾動<a href="http://www.rs2pl.com/">DIV+CSS</a></p> 
  20. <div class="modu"> 
  21. <div class="lf"><img src="images/news.gif" alt="" width="11" height="11" /> 滾動消息：</div> 
  22. <div class="rt"> 
  23. <script type="text/javascript"> 
  24. var marqueeContent=new Array(); //滾動主題 
  25.  
  26. marqueeContent[0]='<a href="http://www.rs2pl.com/" target="_blank">
    + CSS學習網,DIV+CSS基礎系統掌握CSS</a>'; 
  27. marqueeContent[1]='<a href="http://www.rs2pl.com/" target="_blank">
    + 顯而易見，最高的效率就是對現有材料的最佳利用。</a>'; 
  28. marqueeContent[2]='<a href="http://www.rs2pl.com/" target="_blank">
    + 自己能解決的事，別花錢，花錢能解決的事，別求人。</a>'; 
  29. marqueeContent[3]='<a href="http://www.rs2pl.com/" target="_blank">
    + 旅行是需要一種心情，更重要的是，需要一種沖動。</a>'; 
  30. marqueeContent[4]='<a href="http://www.rs2pl.com/" target="_blank">
    + 隨時用零碎的時間(如等人、排隊等)做零碎的事情。</a>'; 
  31.  
  32. var marqueeInterval=new Array(); //定義一些常用而且要經常用到的變量 
  33. var marqueeId=0; 
  34. var marqueeDelay=4000; 
  35. var marqueeHeight=15; 
  36. function initMarquee() { 
  37. var str=marqueeContent[0]; 
  38. document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px"
     onmouseover="clearInterval(marqueeInterval[0])" 
    onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)">
    <div>'+str+'</div></div>'); 
  39. marqueeId++; 
  40. marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); 
  41. } 
  42. function startMarquee() { 
  43. var str=marqueeContent[marqueeId]; 
  44. marqueeId++; 
  45. if(marqueeId>=marqueeContent.length) marqueeId=0; 
  46. if(marqueeBox.childNodes.length==1) { 
  47. var nextLine=document.createElement('DIV'); 
  48. nextLine.innerHTML=str; 
  49. marqueeBox.appendChild(nextLine); 
  50. } 
  51. else { 
  52. marqueeBox.childNodes[0].innerHTML=str; 
  53. marqueeBox.appendChild(marqueeBox.childNodes[0]); 
  54. marqueeBox.scrollTop=0; 
  55. } 
  56. clearInterval(marqueeInterval[1]); 
  57. marqueeInterval[1]=setInterval("scrollMarquee()",10); 
  58. } 
  59. function scrollMarquee() { 
  60. marqueeBox.scrollTop++; 
  61. if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight){ 
  62. clearInterval(marqueeInterval[1]); 
  63. } 
  64. } 
  65. initMarquee(); 
  66. </script> 
  67. </div> 
  68. </div> 
  69. </body> 
  70. </html> 

說明這里CSS是直接放置到網頁里<head>內style標簽引入css，沒有從外部引用CSS代碼。

更簡便CSS不間斷模板：http://www.rs2pl.com/rumen/r1.shtml

以上為DIV+CSS模板中的純CSS滾動消息布局代碼及說明。
查看CSS滾動網頁演示：http://www.rs2pl.com/fanli/gdxx/
點擊另存為下載此DIV+CSS向上無間斷滾動代碼打包下載：

立即下載 （3.730KB）

如需轉載，請注明文章出處和來源網址：http://www.rs2pl.com/template/m105.shtml

必備CSS教程Essential CSS Tutorials
必備HTML基礎教程Essential HTML Tutorials
最新文章 NEWS
CSS 特效 CSS EFFECTS
相關文章 RELATED
熱點文章 HOT
久久天天躁狠狠躁夜夜躁2020