1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 5 <title>向上无缝滚动</title> 6 <style> 7 8 body { 9 font-size: 12px; 10 line-height: 24px; 11 text-algin: center; /* 页面内容居中 */ 12 } 13 * { 14 margin: 0px; 15 padding: 0px; /* 去掉所有标签的marign和padding的值 */ 16 } 17 ul { 18 list-style: none; /* 去掉ul标签默认的点样式 */ 19 } 20 a img { 21 border: none; /* 超链接下，图片的边框 */ 22 } 23 a { 24 color: #333; 25 text-decoration: none; /* 超链接样式 */ 26 } 27 a:hover { 28 color: #ff0000; 29 } 30 #mooc { 31 width: 399px; 32 border: 5px solid #ababab; 33 -moz-border-radius: 15px; /* Gecko browsers */ 34 -webkit-border-radius: 15px; /* Webkit browsers */ 35 border-radius: 15px; 36 box-shadow: 2px 2px 10px #ababab; 37 margin: 50px auto 0; 38 text-align: left; /* 让新闻内容靠左 */ 39 } 40 /* 头部样式 */ 41 #moocTitle { 42 height: 62px; 43 overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */ 44 font-size: 26px; 45 line-height: 62px; 46 padding-left: 30px; 47 background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */ 48 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */ 49 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/ 50 border: 1px solid ##f05e6f; 51 -moz-border-radius: 8px 8px 0 0; /* Gecko browsers */ 52 -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */ 53 border-radius: 8px 8px 0 0; 54 color: #fff; 55 position: relative; 56 } 57 #moocTitle a { 58 position: absolute; 59 right: 10px; 60 bottom: 10px; 61 display: inline; 62 color: #fff; 63 font-size: 12px; 64 line-height: 24px; 65 } 66 /* 底部样式 */ 67 #moocBot { 68 width: 399px; 69 height: 10px; 70 overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */ 71 } 72 /* 中间样式 */ 73 #moocBox { 74 height: 144px; 75 width: 335px; 76 margin-left: 25px; 77 margin-top: 10px; 78 overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */ 79 } 80 #mooc ul li { 81 height: 24px; 82 } 83 #mooc ul li a { 84 width: 180px; 85 float: left; 86 display: block; 87 overflow: hidden; 88 text-indent: 15px; 89 height: 24px; 90 } 91 #mooc ul li span { 92 float: right; 93 color: #999; 94 } 95 </style> 96 </head> 97 <body> 98 <div id="mooc"> 99 <h3 id="moocTitle"> 100 最新课程 101 <a target="_self" href="#">更多>></a> 102 </h3> 103 <div id="moocBox"> 104 <ul id="con1"> 105 <li> 106 <a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a> 107 <span>2013-09-18</span> 108 </li> 109 <li> 110 <a href="#">2.tab页面切换效果（案例）</a> 111 <span>2013-10-09</span> 112 </li> 113 <li> 114 <a href="#">3.圆角水晶按钮制作（案例）</a> 115 <span>2013-10-21</span> 116 </li> 117 <li> 118 <a href="#">4.HTML+CSS基础课程(系列)</a> 119 <span>2013-11-01</span> 120 </li> 121 <li> 122 <a href="#">5.分页页码制作（案例）</a> 123 <span>2013-11-06</span> 124 </li> 125 <li> 126 <a href="#">6.导航条菜单的制作（案例）</a> 127 <span>2013-11-08</span> 128 </li> 129 <li> 130 <a href="#">7.信息列表制作(案例)</a> 131 <span>2013-11-15</span> 132 </li> 133 <li> 134 <a href="#">8.下拉菜单制作(案例)</a> 135 <span>2013-11-22</span> 136 </li> 137 <li> 138 <a href="#">9.如何实现“新手引导”效果</a> 139 <span>2013-12-06</span> 140 </li> 141 </ul> 142 <ul id="con2"> 143 <li> 144 <a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a> 145 <span>2013-09-18</span> 146 </li> 147 <li> 148 <a href="#">2.tab页面切换效果（案例）</a> 149 <span>2013-10-09</span> 150 </li> 151 <li> 152 <a href="#">3.圆角水晶按钮制作（案例）</a> 153 <span>2013-10-21</span> 154 </li> 155 <li> 156 <a href="#">4.HTML+CSS基础课程(系列)</a> 157 <span>2013-11-01</span> 158 </li> 159 <li> 160 <a href="#">5.分页页码制作（案例）</a> 161 <span>2013-11-06</span> 162 </li> 163 <li> 164 <a href="#">6.导航条菜单的制作（案例）</a> 165 <span>2013-11-08</span> 166 </li> 167 <li> 168 <a href="#">7.信息列表制作(案例)</a> 169 <span>2013-11-15</span> 170 </li> 171 <li> 172 <a href="#">8.下拉菜单制作(案例)</a> 173 <span>2013-11-22</span> 174 </li> 175 <li> 176 <a href="#">9.如何实现“新手引导”效果</a> 177 <span>2013-12-06</span> 178 </li> 179 </ul> 180 </div> 181 </div> 182 <script type="text/javascript"> 183 184 var area = document.getElementById('moocBox'); 185 var con1 = document.getElementById('con1'); 186 var con2 = document.getElementById('con2'); 187 var speed = 50; 188 area.scrollTop = 0; 189 con2.innerHTML = con1.innerHTML; 190 function scrollUp(){ 191 if(area.scrollTop >= con1.scrollHeight) { 192 area.scrollTop = 0; 193 }else{ 194 area.scrollTop ++; 195 } 196 } 197 var myScroll = setInterval("scrollUp()",speed); 198 area.onmouseover = function(){ 199 clearInterval(myScroll); 200 } 201 area.onmouseout = function(){ 202 myScroll = setInterval("scrollUp()",speed); 203 } 204 205 </script> 206 </body> 207 </html>