R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R

      <noframes id="LVXRHZN"><address id="LVXRHZN"><nobr id="LVXRHZN"></nobr></address>

      <noframes id="LVXRHZN"><noframes id="LVXRHZN"><address id="LVXRHZN"><listing id="LVXRHZN"></listing></address>
      <sub id="LVXRHZN"></sub>

        <sub id="LVXRHZN"></sub>
        <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>

        <sub id="LVXRHZN"></sub>

        <address id="LVXRHZN"></address>

        <address id="LVXRHZN"></address>
        <noframes id="LVXRHZN">

          <noframes id="LVXRHZN">
          <sub id="LVXRHZN"></sub>
              <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>
            1. 820466150 2017-11-04
            2. 388113149 2017-11-04
            3. 740898148 2017-11-04
            4. 892683147 2017-11-04
            5. 540252146 2017-11-04
            6. 888745145 2017-11-04
            7. 981419144 2017-11-04
            8. 544637143 2017-11-04
            9. 454205142 2017-11-04
            10. 212476141 2017-11-04
            11. 39821140 2017-11-04
            12. 170835139 2017-11-03
            13. 37766138 2017-11-03
            14. 538854137 2017-11-03
            15. 926181136 2017-11-03
            16. 18188135 2017-11-03
            17. 420335134 2017-11-03
            18. 553276133 2017-11-03
            19. 4149132 2017-11-02
            20. 883561131 2017-11-02
            21. 891189130 2017-11-02
            22. 649552129 2017-11-02
            23. 950957128 2017-11-02
            24. 295914127 2017-11-02
            25. 781243126 2017-11-02
            26. 682892125 2017-11-02
            27. 829649124 2017-11-02
            28. 168426123 2017-11-01
            29. 406171122 2017-11-01
            30. 724134121 2017-11-01
            31. “砥砺奋进的五年”大型成就展
            32. “总书记的回信说到了我们心坎上”
            33. 德媒:拒绝“洋垃圾”——肮脏的游戏,中国不玩了
            34. 求实创造 为人师表
            35. 家长群里质疑老师收礼排座位 被班主任踢出家长群
            36. 两手抓两促进 打造坚强战斗堡垒
            37. 新论:党章,每个党员都需时刻铭记
            38. 谁击落了MH17?各方互相指责
            39. 互联网用户公众账号信息服务管理规定
            40. 台籍律师在大陆 就业+创业不是“梦”
            41. 法国总统说政治对话是保证叙利亚实现可持续和平的唯一办法
            42. 天胶“保险+期货”精准扶贫首批给付500万 惠及云南临沧400余建档贫困户
            43. [征集]资深网友看这里 新时代老人们希望何种"夕阳红"
            44. 近千家A股公司三季报业绩预喜
            45. 台媒吹台特种兵“斩首”能力一流:堪比海豹三角洲
            46. 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
              您的位置:DIVCSS5学习网 > DIV+CSS???/a> >

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

              DIVCSS5学习网不间断上下滚动模板

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

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

              CSS 代码如下:

               <style type="text/css">
              /* DIVCSS5学习网代码如下 www.tommstudio.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.tommstudio.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.tommstudio.com/" target="_blank">
              10. + CSS学习网,DIV+CSS基础系统掌握CSS</a>'; 
              11. marqueeContent[1]='<a href="http://www.tommstudio.com/" target="_blank">
              12. + 显而易见,最高的效率就是对现有材料的最佳利用。</a>'; 
              13. marqueeContent[2]='<a href="http://www.tommstudio.com/" target="_blank">
              14. + 自己能解决的事,别花钱,花钱能解决的事,别求人。</a>'; 
              15. marqueeContent[3]='<a href="http://www.tommstudio.com/" target="_blank">
              16. + 旅行是需要一种心情,更重要的是,需要一种冲动。</a>'; 
              17. marqueeContent[4]='<a href="http://www.tommstudio.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.tommstudio.com/1999/xhtml"> 
              3. <head> 
              4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
              5. <meta content="" name="keywords" /> 
              6. <title>文字滚动消息广告代码,广告代码下载-www.tommstudio.com</title> 
              7. <style type="text/css"> 
              8. /* CSS代码如下 www.tommstudio.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.tommstudio.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.tommstudio.com/" target="_blank">
                + CSS学习网,DIV+CSS基础系统掌握CSS</a>'; 
              27. marqueeContent[1]='<a href="http://www.tommstudio.com/" target="_blank">
                + 显而易见,最高的效率就是对现有材料的最佳利用。</a>'; 
              28. marqueeContent[2]='<a href="http://www.tommstudio.com/" target="_blank">
                + 自己能解决的事,别花钱,花钱能解决的事,别求人。</a>'; 
              29. marqueeContent[3]='<a href="http://www.tommstudio.com/" target="_blank">
                + 旅行是需要一种心情,更重要的是,需要一种冲动。</a>'; 
              30. marqueeContent[4]='<a href="http://www.tommstudio.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.tommstudio.com/rumen/r1.shtml

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

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

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

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