• 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

    时时彩走势图后一不间断上下滚动模板

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

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

    CSS 代码如下:

     <style type="text/css">
    /* 时时彩走势图后一代码如下 时时彩走势图后一 www.cuhw.com.cn */
    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="//www.cuhw.com.cn/">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="//www.cuhw.com.cn/" target="_blank">
    10. + CSS学习网,DIV+CSS基础系统掌握CSS</a>'; 
    11. marqueeContent[1]='<a href="//www.cuhw.com.cn/" target="_blank">
    12. + 显而易见,最高的效率就是对现有材料的最佳利用。</a>'; 
    13. marqueeContent[2]='<a href="//www.cuhw.com.cn/" target="_blank">
    14. + 自己能解决的事,别花钱,花钱能解决的事,别求人。</a>'; 
    15. marqueeContent[3]='<a href="//www.cuhw.com.cn/" target="_blank">
    16. + 旅行是需要一种心情,更重要的是,需要一种冲动。</a>'; 
    17. marqueeContent[4]='<a href="//www.cuhw.com.cn/" 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="//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.cuhw.com.cn</title> 
    7. <style type="text/css"> 
    8. /* CSS代码如下 时时彩走势图后一 www.cuhw.com.cn */ 
    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="//www.cuhw.com.cn/">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="//www.cuhw.com.cn/" target="_blank">
      + CSS学习网,DIV+CSS基础系统掌握CSS</a>'; 
    27. marqueeContent[1]='<a href="//www.cuhw.com.cn/" target="_blank">
      + 显而易见,最高的效率就是对现有材料的最佳利用。</a>'; 
    28. marqueeContent[2]='<a href="//www.cuhw.com.cn/" target="_blank">
      + 自己能解决的事,别花钱,花钱能解决的事,别求人。</a>'; 
    29. marqueeContent[3]='<a href="//www.cuhw.com.cn/" target="_blank">
      + 旅行是需要一种心情,更重要的是,需要一种冲动。</a>'; 
    30. marqueeContent[4]='<a href="//www.cuhw.com.cn/" 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不间断模板//www.cuhw.com.cn/rumen/r1.shtml

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

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

  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 山西十一选五开奖 河北快三开奖结果一定 南通棋牌官网安卓版 足彩进球彩18138期冷门 李逵劈鱼游戏机 青海快3十大规律 新加坡快乐8走势图 双色球开奖规则复式 足球胜平负比分直播 彩票88群 贵州快三走势 大嘴棋牌游戏大厅官网 003期一码中特 买彩票软件 王者荣耀s15 南粤36选7最新开奖号码2018