欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS模块 >

div+css不间断上下滚动模板

div+css不间断上下滚动模板

这里会用到js,这里直接拷贝使用即可。
常常我们会看见别人网页上使用上下不间断文字特效来展示公告、广告等内容,接下来我们将此css模板给大家。

效果图如下
div+css不间断滚动CSS代码最终效果演示图
不间断滚动代码效果图

CSS 代码如下:

 <style type="text/css">
/* CSS代码如下 www.divcss5.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.divcss5.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.divcss5.com/" target="_blank">
  10. + CSS学习网,DIV+CSS基础系统掌握CSS</a>'; 
  11. marqueeContent[1]='<a href="http://www.divcss5.com/" target="_blank">
  12. + 显而易见,最高的效率就是对现有材料的最佳利用。</a>'; 
  13. marqueeContent[2]='<a href="http://www.divcss5.com/" target="_blank">
  14. + 自己能解决的事,别花钱,花钱能解决的事,别求人。</a>'; 
  15. marqueeContent[3]='<a href="http://www.divcss5.com/" target="_blank">
  16. + 旅行是需要一种心情,更重要的是,需要一种冲动。</a>'; 
  17. marqueeContent[4]='<a href="http://www.divcss5.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. function startMarquee() { 
  32. var str=marqueeContent[marqueeId]; 
  33. marqueeId++; 
  34. if(marqueeId>=marqueeContent.length) marqueeId=0
  35. if(marqueeBox.childNodes.length==1) { 
  36. var nextLine=document.createElement('DIV'); 
  37. nextLine.innerHTML=str
  38. marqueeBox.appendChild(nextLine); 
  39. else { 
  40. marqueeBox.childNodes[0].innerHTML=str
  41. marqueeBox.appendChild(marqueeBox.childNodes[0]); 
  42. marqueeBox.scrollTop=0
  43. clearInterval(marqueeInterval[1]); 
  44. marqueeInterval[1]=setInterval("scrollMarquee()",10); 
  45. function scrollMarquee() { 
  46. marqueeBox.scrollTop++; 
  47. if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight){ 
  48. clearInterval(marqueeInterval[1]); 
  49. initMarquee(); 
  50. </script> 
  51. </div> 
  52. </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.divcss5.com</title> 
  7. <style type="text/css"> 
  8. /* CSS代码如下 www.divcss5.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.divcss5.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.divcss5.com/" target="_blank">
    + CSS学习网,DIV+CSS基础系统掌握CSS</a>'; 
  27. marqueeContent[1]='<a href="http://www.divcss5.com/" target="_blank">
    + 显而易见,最高的效率就是对现有材料的最佳利用。</a>'; 
  28. marqueeContent[2]='<a href="http://www.divcss5.com/" target="_blank">
    + 自己能解决的事,别花钱,花钱能解决的事,别求人。</a>'; 
  29. marqueeContent[3]='<a href="http://www.divcss5.com/" target="_blank">
    + 旅行是需要一种心情,更重要的是,需要一种冲动。</a>'; 
  30. marqueeContent[4]='<a href="http://www.divcss5.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. function startMarquee() { 
  42. var str=marqueeContent[marqueeId]; 
  43. marqueeId++; 
  44. if(marqueeId>=marqueeContent.length) marqueeId=0
  45. if(marqueeBox.childNodes.length==1) { 
  46. var nextLine=document.createElement('DIV'); 
  47. nextLine.innerHTML=str
  48. marqueeBox.appendChild(nextLine); 
  49. else { 
  50. marqueeBox.childNodes[0].innerHTML=str
  51. marqueeBox.appendChild(marqueeBox.childNodes[0]); 
  52. marqueeBox.scrollTop=0
  53. clearInterval(marqueeInterval[1]); 
  54. marqueeInterval[1]=setInterval("scrollMarquee()",10); 
  55. function scrollMarquee() { 
  56. marqueeBox.scrollTop++; 
  57. if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight){ 
  58. clearInterval(marqueeInterval[1]); 
  59. initMarquee(); 
  60. </script> 
  61. </div> 
  62. </div> 
  63. </body> 
  64. </html> 

说明这里CSS是直接放置到网页里<head>内style标签引入css,没有从外部引用CSS代码。

更简便CSS不间断模板http://www.divcss5.com/rumen/r1.shtml

以上为DIV+CSS模板中的纯CSS滚动消息布局代码及说明。
查看CSS滚动网页演示:http://www.divcss5.com/fanli/gdxx/
点击另存为下载此DIV+CSS向上无间断滚动代码打包下载:

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/template/m105.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2010-04-28 09:13 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。