單行新聞公告間歇垂直無縫滾動

admin發表於2019-01-27

單行垂直新聞公告效果應用非常廣泛，本站也有使用。

效果特點：

（1）.單行新聞垂直滾動。

（2）.滾動具有間歇暫停效果。

（3）.滑鼠懸浮暫停滾動，滑鼠離開繼續滾動。

程式碼例項如下： 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
}
ul li {
  height:20px;
}
.gonggao {
  height:20px;
  overflow:hidden
}
</style>
<script type="text/javascript">
let ann = () => {
  let stopscroll = false;
  let gonggaoBox = document.getElementsByClassName("gonggao")[0];
  let ulBox = gonggaoBox.getElementsByTagName("ul")[0];
  let ulBoxH = ulBox.offsetHeight;
  gonggaoBox.onmouseover = () => { stopscroll = true }
  gonggaoBox.onmouseout = () => { stopscroll = false }

  let currentTop = 0;
  let stoptime = 0;

  ulBox.innerHTML = ulBox.innerHTML + ulBox.innerHTML;
  
  let init_srolltext = () => {
    gonggaoBox.scrollTop = 0;
    setInterval(scrollUp, 15);
  }
  let scrollUp = () => {
    if (stopscroll) return;
    currentTop += 1;
    if (currentTop == 21) {
      stoptime += 1;
      currentTop -= 1;
      if (stoptime == 220) {
        currentTop = 0;
        stoptime = 0;
      }
    } else {
      gonggaoBox.scrollTop += 1;
      if (ulBoxH == gonggaoBox.scrollTop) {
        gonggaoBox.scrollTop = 0;
      }
    }
  }
  init_srolltext();
}

window.onload = function () {
  ann();
}
</script>
</head>
<body>
<div class="gonggao">
  <ul>
    <li>
      <span><a href="#">宗旨是分享免費文字教程</a></span><em>( 2018-04-11 )</em>
    </li>
    <li>
      <span><a href="#">網站近期改版</a></span><em>( 2018-04-05 )</em>
    </li>
  </ul>
</div>
</body>
</html>

上面程式碼實現了預期效果，下面介紹一下它的實現過程。

一.程式碼註釋： 

[CSS] 純文字檢視 複製程式碼
* {
  margin:0px;
}

將所有元素的外邊距設定為0。 

[CSS] 純文字檢視 複製程式碼
ul li {
  height:20px;
}
.gonggao {
  height:20px;
  overflow:hidden
}

將li元素的高度設定為20px。

外層的容器gonggao高度也恰好是20px，超出的尺寸隱藏，這樣就能恰好顯示一行公告。 

[JavaScript] 純文字檢視 複製程式碼
let ann = () => {
  //code
}

呼叫此箭頭函式可以實現垂直帶有暫停的滾動功能。 

[JavaScript] 純文字檢視 複製程式碼
let stopscroll = false;
let gonggaoBox = document.getElementsByClassName("gonggao")[0];
let ulBox = gonggaoBox.getElementsByTagName("ul")[0];

宣告變數stopscroll並初始化值為false，用來標識當前效果是否處於滾動狀態，等於false表示處於滾動狀態，等於true表示處於停止滾動狀態。

然後獲取class屬性值為gonggao的第一個元素物件，也就是這裡的div物件。

最後獲取div下的ul元素物件。 

[JavaScript] 純文字檢視 複製程式碼
let ulBoxH = ulBox.offsetHeight;

獲取ul元素的高度。 

[JavaScript] 純文字檢視 複製程式碼
gonggaoBox.onmouseover = () => { stopscroll = true }
gonggaoBox.onmouseout = () => { stopscroll = false }

註冊事件處理函式，當滑鼠移到div上時，將stopscroll設定為true，停止滾動。

當滑鼠離開div時，將stopscroll設定為false，繼續滾動。 

[JavaScript] 純文字檢視 複製程式碼
let currentTop = 0;
let stoptime = 0;

宣告兩個變數，並賦初值為0，後面會有介紹。 

[JavaScript] 純文字檢視 複製程式碼
ulBox.innerHTML = ulBox.innerHTML + ulBox.innerHTML;

將ul中的內容複製一份追加到原來的內容上。

比如原來有兩個li元素如下： 

[HTML] 純文字檢視 複製程式碼
<li>
  <span><a href="#">宗旨是分享免費文字教程</a></span><em>( 2018-04-11 )</em>
</li>
<li>
  <span><a href="#">網站近期改版</a></span><em>( 2018-04-05 )</em>
</li>

通過複製追加之後變為： 

[HTML] 純文字檢視 複製程式碼
<li>
  <span><a href="#">宗旨是分享免費文字教程</a></span><em>( 2018-04-11 )</em>
</li>
<li>
  <span><a href="#">網站近期改版</a></span><em>( 2018-04-05 )</em>
</li>
<li>
  <span><a href="#">宗旨是分享免費文字教程</a></span><em>( 2018-04-11 )</em>
</li>
<li>
  <span><a href="#">網站近期改版</a></span><em>( 2018-04-05 )</em>
</li>

於是，向上滾動的時候，就會有頭尾相接無縫的視覺效果，否則向上滾動，底部就會出現空缺。 

[PHP] 純文字檢視 複製程式碼
let init_srolltext = () => {
  gonggaoBox.scrollTop = 0;
  setInterval(scrollUp, 15);
}

呼叫次函式開始進行滾動效果。

首先將div向上滾動的尺寸初始化為0，然後通過定時器函式每隔15毫秒呼叫一次scrollUp函式。 

[JavaScript] 純文字檢視 複製程式碼
let scrollUp = () => {
  //code
}

此函式是效果的核心，下面會具體介紹。 

[JavaScript] 純文字檢視 複製程式碼
if (stopscroll) return;

如果stopscroll值為真，那麼直接跳出函式，也就是不滾動。

函式每執行一次，值加1，表示向上滾動了1px。 

[JavaScript] 純文字檢視 複製程式碼
currentTop += 1;
if (currentTop == 21) {
  stoptime += 1;
  currentTop -= 1;
 if (stoptime == 220) {
  currentTop = 0;
  stoptime = 0;
 }
}

首先currentTop加1，然後判斷此值是否等於21。

如果等於21，則說明已經完成一個完整的li元素上滾（li的高度是20px），然後進入暫停狀態。

stoptime變數作為一個計量，值在0-220之間，滾動都處於暫停狀態。

currentTop值減1，為了保持currentTop值在暫停期間是不變的。

最後判斷currentTop是否等於220（暫停狀態已經達到臨界時間）。

如果等於，currentTop和stoptime重置為0。 

[JavaScript] 純文字檢視 複製程式碼
else {
  gonggaoBox.scrollTop += 1;
  if (ulBoxH == gonggaoBox.scrollTop) {
    gonggaoBox.scrollTop = 0;
  }
}

如果currentTop不等於21，也就是currentTop在執行currentTop += 1前小於20，一次完整的li滾動並未完成。

那麼繼續繼續向上滾動（gonggaoBox.scrollTop += 1）。

如果ulBoxH 等於 gonggaoBox.scrollTop，說明所有新聞公告完成一次滾動，這時候拷貝追加的第一個li處於當前位置；於是將gonggaoBox.scrollTop重置為0，這樣在視覺上實現無縫的滾動效果。

二.相關閱讀：

（1）.getElementsByClassName()參閱JavaScript getElementsByClassName()一章節。

（2）.getElementsByTagName()參閱JavaScript getElementsByTagName()一章節。

（3）.offsetHeight參閱JavaScript offsetHeight一章節。

（4）.onmouseover事件參閱JavaScript mouseover 事件一章節。

（5）.onmouseout事件參閱JavaScript mouseout 事件一章節。

（6）.innerHTML參閱JavaScript innerHTML 屬性一章節。

（7）.scrollTop參閱JavaScript scrollTop一章節。

（8）.setInterval()參閱JavaScript setInterval()一章節。

（9）.箭頭函式參閱JavaScript 箭頭函式介紹一章節。

相關文章