实现一段文字向上无缝滚动的代码

admin

实现文字上下无缝滚动的代码，效果如下图所示：

代码如下：

1. <html>
   
2. <body>
   
3. <style>
   
4. body {
   
5.     font-size: 12px;
   
6.     line-height: 24px;
   
7.     text-algin: center;        /* 页面内容居中 */
   
8. }
   
9. * {
   
10.     margin: 0px;
    
11.     padding: 0px;            /*  去掉所有标签的marign和padding的值  */
    
12. }
    
13. ul {
    
14.     list-style: none;           /*  去掉ul标签默认的点样式  */
    
15. }
    
16. a img {
    
17.     border: none;        /*  超链接下，图片的边框  */
    
18. }
    
19. a {
    
20.     color: #333;
    
21.     text-decoration: none;     /* 超链接样式 */
    
22. }
    
23. a:hover {
    
24.     color: #ff0000;
    
25. }
    
26. #mooc {
    
27.     width: 399px;
    
28.     border: 5px solid #ababab;
    
29.     -moz-border-radius: 15px;      /* Gecko browsers */
    
30.     -webkit-border-radius: 15px;   /* Webkit browsers */
    
31.     border-radius: 15px;
    
32.     box-shadow: 2px 2px 10px #ababab;
    
33.     margin: 50px auto 0;
    
34.     text-align: left;               /* 让新闻内容靠左 */
    
35. }
    
36. /*  头部样式 */
    
37. #moocTitle {
    
38.     height: 62px;
    
39.     overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
    
40.     font-size: 26px;
    
41.     line-height: 62px;
    
42.     padding-left: 30px;
    
43.     background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
    
44.     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
    
45. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
    
46.     border: 1px solid ##f05e6f;
    
47.     -moz-border-radius: 8px 8px 0 0;      /* Gecko browsers */
    
48.     -webkit-border-radius: 8px 8px 0 0;   /* Webkit browsers */
    
49.     border-radius: 8px 8px 0 0;
    
50.     color: #fff;
    
51.     position: relative;
    
52. }
    
53. #moocTitle a {
    
54.     position: absolute;
    
55.     right: 10px;
    
56.     bottom: 10px;
    
57.     display: inline;
    
58.     color: #fff;
    
59.     font-size: 12px;
    
60.     line-height: 24px;
    
61. }
    
62. /*  底部样式 */
    
63. #moocBot {
    
64.     width: 399px;
    
65.     height: 10px;
    
66.     overflow: hidden;     /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
    
67. }
    
68. /*  中间样式 */
    
69. #moocBox {
    
70.     height: 144px;
    
71.     width: 335px;
    
72.     margin-left: 25px;
    
73.     margin-top: 10px;
    
74.     overflow: hidden;    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
    
75. }
    
76. #mooc ul li {
    
77.     height: 24px;
    
78. }
    
79. #mooc ul li a {
    
80.     width: 180px;
    
81.     float: left;
    
82.     display: block;
    
83.     overflow: hidden;
    
84.     text-indent: 15px;
    
85.     height: 24px;
    
86. }
    
87. #mooc ul li span {
    
88.     float: right;
    
89.     color: #999;
    
90. }
    
91. </style>
    
92. 
    
93. <div  id="mooc">
    
94. <!--  头部 -->
    
95. <h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>
    
96. <!--  头部结束 -->
    
97. <!--  中间 -->
    
98. <div  id="moocBox">
    
99.     <ul id="con1">
    
100.         <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
     
101.         <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
     
102.         <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
     
103.         <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
     
104.         <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
     
105.         <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
     
106.         <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
     
107.         <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
     
108.         <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
     
109.     </ul>
     
110.     <ul id="con2">
     
111.     </ul>
     
112. </div>
     
113. <!--  中间结束 -->
     
114. </div>
     
115. <script>
     
116.     var area=document.getElementById('moocBox');
     
117.     area.scrollTop=0;//scrollTop初始化对象滚动条的距离，此属性是系统标准化的
     
118.     //获取第一个ul对象
     
119.     var con1=document.getElementById('con1');
     
120.     //获取第二个ul对象
     
121.     var con2=document.getElementById('con2');
     
122.     //将第一个ul对象里的内容给第二个ul对象
     
123.     con2.innerHTML=con1.innerHTML;
     
124.     //封装函数 用来判断滚动条的距离与盒子高度的关系
     
125.     function scrollUp(){
     
126.         if(area.scrollTop>=con1.offsetHeight){
     
127.             area.scrollTop=0;
     
128.         }else{
     
129.             area.scrollTop++;
     
130.         }
     
131.     }
     
132.     //声明定时器
     
133.     var timer=null;
     
134.     //解决暴力用户 在开启定时器之前最好先清除一下定时器
     
135.     clearInterval(timer);
     
136.     //开始定时器
     
137.     timer=setInterval(scrollUp,50);
     
138. 
     
139.     //为对象设置绑定鼠标滑过
     
140.     area.onmouseover=function(){
     
141.         clearInterval(timer);
     
142.     }
     
143.     //为对象绑定鼠标划出
     
144.     area.onmouseout=function(){
     
145.         timer=setInterval(scrollUp,50);
     
146.     }
     
147. </script>
     
148. 
     
149. </body>
     
150. </html>

复制代码