1 <!DOCTYPE html > 2 <html > 3 <head> 4 <meta charset=utf-8" /> 5 <title>新闻间歇性向上滚动</title> 6 <style> 7 body { 8 font-size: 12px; 9 line-height: 24px; 10 text-algin: center; /* 页面内容居中 */ 11 } 12 * { 13 margin: 0px; 14 padding: 0px; /* 去掉所有标签的marign和padding的值 */ 15 } 16 ul { 17 list-style: none; /* 去掉ul标签默认的点样式 */ 18 } 19 a img { 20 border: none; /* 超链接下，图片的边框 */ 21 } 22 a { 23 color: #333; 24 text-decoration: none; /* 超链接样式 */ 25 } 26 a:hover { 27 color: #ff0000; 28 } 29 #mooc { 30 width: 399px; 31 border: 5px solid #ababab; 32 -moz-border-radius: 15px; /* Gecko browsers */ 33 -webkit-border-radius: 15px; /* Webkit browsers */ 34 border-radius: 15px; 35 box-shadow: 2px 2px 10px #ababab; 36 margin: 50px auto 0; 37 text-align: left; /* 让新闻内容靠左 */ 38 } 39 /* 头部样式 */ 40 #moocTitle { 41 height: 62px; 42 overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */ 43 font-size: 26px; 44 line-height: 62px; 45 padding-left: 30px; 46 background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */ 47 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */ 48 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/ 49 border: 1px solid ##f05e6f; 50 -moz-border-radius: 8px 8px 0 0; /* Gecko browsers */ 51 -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */ 52 border-radius: 8px 8px 0 0; 53 color: #fff; 54 position: relative; 55 } 56 #moocTitle a { 57 position: absolute; 58 right: 10px; 59 bottom: 10px; 60 display: inline; 61 color: #fff; 62 font-size: 12px; 63 line-height: 24px; 64 } 65 /* 底部样式 */ 66 #moocBot { 67 width: 399px; 68 height: 10px; 69 overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */ 70 } 71 /* 中间样式 */ 72 #moocBox { 73 height: 144px; 74 width: 335px; 75 margin-left: 25px; 76 margin-top: 10px; 77 overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */ 78 } 79 #mooc ul li { 80 height: 24px; 81 } 82 #mooc ul li a { 83 width: 180px; 84 float: left; 85 display: block; 86 overflow: hidden; 87 text-indent: 15px; 88 height: 24px; 89 } 90 #mooc ul li span { 91 float: right; 92 color: #999; 93 } 94 </style> 95 </head> 96 97 <body> 98 <!-- 前端课程公告开始 --> 99 <div id="mooc"> 100 <!-- 头部 --> 101 <div id="moocTitle">前端最新课程<a href="#" target="_self">更多>></a> </div> 102 <!-- 头部结束 --> 103 <!-- 中间 --> 104 <div id="moocBox"> 105 <ul> 106 <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li> 107 <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li> 108 <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li> 109 <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li> 110 <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li> 111 <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li> 112 <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> 113 <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li> 114 <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li> 115 </ul> 116 </div> 117 <!-- 中间结束 --> 118 <!-- 底部 --> 119 <div id ="moocBot"> </div> 120 <!-- 底部结束 --> 121 </div> 122 <!-- 前端课程公告结束 --> 123 124 <script type="text/javascript"> 125 var area = document.getElementById('moocBox'); 126 var iliHeight = 24;//单行滚动的高度 127 var speed = 50;//滚动的速度 128 var time; 129 var delay= 2000; 130 area.scrollTop=0; 131 area.innerHTML+=area.innerHTML;//克隆一份一样的内容 132 function startScroll(){ 133 time=setInterval("scrollUp()",speed); 134 area.scrollTop++; 135 } 136 function scrollUp(){ 137 if(area.scrollTop % iliHeight==0){ 138 clearInterval(time); 139 setTimeout(startScroll,delay); 140 }else{ 141 area.scrollTop++; 142 if(area.scrollTop >= area.scrollHeight/2){ 143 area.scrollTop =0; 144 } 145 } 146 } 147 setTimeout(startScroll,delay) 148 </script> 149 </body> 150 </html>
做题思路及注意点：：
1：样式布局方面：
（1）注意#moocBox的包裹层设置高度为滚动信息高度的倍数（例如滚动信息li的高度24px;#moocBox的包裹层要显示6条信息设置高度为24*6=144px；）；
（2）#moocBox的包裹层样式overflow: hidden; 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分；
2：js交互方面：
（1）用setTimeout 实现间歇，用setInterval（）方法实现向上滚动；
（2）js详细做题步骤：
获取信息包裹层，定义信息包裹层的area.scrollTop=0,定义liHeight=24；定义var time；
area.innerHTML+=area.innerHTML;//克隆一份一样的内容；
信息向上滚动：function startScroll(){time=setInterval（"scrollUp()",50）;area.scrollTop++;}//
间歇性 ： function scrollUp（）{
if(scrollTop % liHeight==0){ //当向上卷去的高度能够被liHeight除尽没有余数；
clearInterval(time)
停止向上滚动；
setTimeout(startScroll,2000); 延迟两秒后执行
}else{
area.scrollTop++; 当以上条件不符合时，继续向上滚动
if(scrollTop>=area.scrollHeight/2){ 即向上卷去的内容大于等于area.scrollHeight时， area.scrollTop =0; 重新开始计算。实现重复滚动 ，除以2是因为克隆多了一份内容
area.scrollTop =0;
}
}
} setTimeout(startScroll,2000) 调用执行；