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) 调用执行；
时间： 2024-10-18 11:36:17