用scrollTop製做一個自動滾動公告欄

咱們在瀏覽網頁時，常常會看到會一些滾動的欄目，好比向上滾動的公告、新聞等。其實他們的製做都不難，只要學了基礎的html、css、javascript就能夠作出來，用JavaScript的scrollTop就行。

scrollTop：返回或設置匹配元素的滾動條的垂直位置。

1 <div id="div1" style="width:200px;height:200px;background-color:#999999;overflow:auto;background-color: #999999;"> 
2 <div style="width:100px;height:300px;background-color:#FFFF00;" > 
3 這些文字顯示在內層元素中。 
4 </div> 
5 </div> 

 

這裏，內層容器高度大於外層容器，就會產生垂直滾動條，當用javascript設置外層容器：

var div1=document.getElementById("div1"); 

div1.scrollTop=50;

文字部分會往上走50像素，至關於用滾動條向下拉了50像素。

（注意：當內層容器內容不超出外層容器高度時，不會產生滾動條，所以scrollTop天然也無效了。若外層容器設置了overflow:hidden時，不顯示滾動條，但內容部分超出外層容器的話，scrollTop依然有效）

  這就是一個已經作好的demo截圖，下面是詳細步驟

一、寫html結構和css樣式

 1 <div  id="main">
 2     <h3 id="title">Title</h3>
 3     <div  id="box">
 4         <ul id="con1">
 5             <li><a href="#">1.學會html5 絕對的屌絲逆襲</a><span>2016-06-01</span></li>
 6             <li><a href="#">2.tab頁面切換效果（案例）</a><span>2016-06-01</span></li>
 7             <li><a href="#">3.圓角水晶按鈕製做（案例）</a><span>2016-06-01</span></li>
 8             <li><a href="#">4.HTML+CSS基礎課程(系列)</a><span>2016-06-01</span></li>
 9             <li><a href="#">5.分頁頁碼製做（案例）</a><span>2016-06-01</span></li>
10             <li><a href="#">6.導航條菜單的製做（案例）</a><span>2016-06-01</span></li>
11             <li><a href="#">7.信息列表製做(案例)</a><span>2016-06-01</span></li>
12             <li><a href="#">8.下拉菜單製做(案例)</a><span>2016-06-01</span></li>
13             <li><a href="#">9.如何實現「新手引導」效果</a><span>2016-06-01</span></li>
14         </ul>
15         <ul id="con2">　　　　/*  滾動須要  */
16 　　　　　</ul> 
17 　</div> 
18</div>

 1         * {
 2             margin: 0px;
 3             padding: 0px;            /*  去掉全部標籤的marign和padding的值  */
 4         }
 5         ul {
 6             list-style: none;           /*  去掉ul標籤默認的點樣式  */
 7         }
 8         a {
 9             color: #333;
10             font-size: 12px;
11             text-decoration: none;     /* 超連接樣式 */
12         }
13         a:hover {
14             color: #ff0000;
15         }
16         #main {
17             width: 399px;
18             border: 5px solid #ababab;
19             -moz-border-radius: 15px;      /* Gecko browsers */
20             -webkit-border-radius: 15px;   /* Webkit browsers */
21             border-radius: 15px;
22             box-shadow: 2px 2px 10px #ababab;
23             margin: 50px auto 0;
24             text-align: left;               /* 讓新聞內容靠左 */
25         }
26         /*  頭部樣式 */
27         #title {
28             height: 62px;
29             overflow: hidden;  /* 內容超出的部分要隱藏，省得撐高頭部 */
30             font-size: 26px;
31             line-height: 62px;
32             padding-left: 30px;
33             background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
34             background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
35             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
36             border: 1px solid #f05e6f;
37             -moz-border-radius: 8px 8px 0 0;      /* Gecko browsers */
38             -webkit-border-radius: 8px 8px 0 0;   /* Webkit browsers */
39             border-radius: 8px 8px 0 0;
40             color: #fff;
41             position: relative;
42         }
43         #title a {
44             position: absolute;
45             right: 10px;
46             bottom: 10px;
47             display: inline;
48             color: #fff;
49             font-size: 12px;
50             line-height: 24px;
51         }
52         #box {
53             height: 144px;
54             width: 335px;
55             margin-left: 25px;
56             margin-top: 10px;
57             overflow: hidden;    /* 超出的內容部分要隱藏，省得撐高中間部分 */
58         }
59         #main ul li {
60             height: 24px;
61         }
62         #main ul li a {
63             float: left;
64             text-indent: 15px;
65         }
66         #main ul li span {
67             float: right;
68             color: #999;
69         }

在con1設置了ul和li的高度樣式，足以撐大容器，使得con1高度大於了外層容器#box高度，scrollTop就起做用了。

二、下面寫javascript部分

1     var area = document.getElementById('box');
2     var con1 = document.getElementById('con1');
3     var con2 = document.getElementById('con2');

先獲取滾動部分的父容器area和滾動部分容器，若設置：area.scrollTop =10;內容就會往上走10px。

咱們的目的就是讓它自動往上滾動，就須要這樣：area.scrollTop ++;用定時器setInterval()調用，就要包裝成函數

 function scrollUp(){
            area.scrollTop ++;
 }
 var myScroll = setInterval("scrollUp()",50);

 

 這表示每50毫秒執行一次scrollTop加一函數，這時就能夠滾動了。但滾動到con1末尾就停了，這時由於後面沒東西了，天然就不會繼續滾動了。再看html有一個空的con2，就是用來處理這個問題，要把con1複製一份給con2 ，讓con1滾動完，繼續滾動con2

    con2.innerHTML = con1.innerHTML;

 

 很明顯con2也會滾動完，那有這麼辦，難道再複製一個con三、con4嗎，確定不可行。con2滾動時，con1已經滾動出外面了，已經看不見了，此時就能夠對它進行操做了。

1     function scrollUp(){
2         if(area.scrollTop >= con1.scrollHeight) {
3             area.scrollTop = 0;
4         }else{
5             area.scrollTop ++;
6         }
7     }

 

更改了scrollUp()函數，加一個判斷，當容器往上滾動（至關於有滾動條、滾動條向下拉）到con1高度時，con1恰好向上消失掉，又出現覆蓋了con2。再繼續向上，滾動出去又立刻覆蓋con2，無限這樣循環。

要改進一下，能夠添加兩個事件,滾動速度能夠用var speed=50;設置

1     area.onmouseover = function(){
2         clearInterval(myScroll);
3     }
4     area.onmouseout = function(){
5         myScroll = setInterval("scrollUp()",speed);
6     }

 

鼠標移動到容器時，就中止滾動，移出時又繼續滾動。

所有javascript代碼以下

 1   var area = document.getElementById('box');
 2     var con1 = document.getElementById('con1');
 3     var con2 = document.getElementById('con2');
 4     var speed = 50;
 5     area.scrollTop = 0;
 6     con2.innerHTML = con1.innerHTML;
 7     function scrollUp(){
 8         if(area.scrollTop >= con1.scrollHeight) {
 9             area.scrollTop = 0;
10         }else{
11             area.scrollTop ++;
12         }
13     }
14     var myScroll = setInterval("scrollUp()",speed);
15     area.onmouseover = function(){
16         clearInterval(myScroll);
17     }
18     area.onmouseout = function(){
19         myScroll = setInterval("scrollUp()",speed);
20     }

 以上就是滾動欄的作法，主要用於我的學習記錄