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>
时间： 2024-10-11 01:21:33