CSS/JS實現無縫滾動字幕

最後更新：2017-08-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：完整 http script pad size 文檔 nload hidden class

實現思路

定義兩個滾動塊，內容一模一樣，從下往上兩個緊挨著滾動，當第一個滾動塊滾動出容器時（即第二個滾動塊頂到了容器的上邊緣），此時我們將第一個滾動塊設定位置到容器上邊緣，由於兩個滾動塊一模一樣，從效果上我們也看不出來容器的內容發生了替換。

html 代碼

<div class="box" id="box">    <ul class="col1" id="col1">        <li>1</li>        <li>1</li>        <li>1</li>        <li>1</li>        <li>1</li>        <li>1</li>        <li>1</li>        <li>1</li>        <li>1</li>    </ul>    <ul class="col2" id="col2">        <li>2</li>        <li>2</li>        <li>2</li>        <li>2</li>        <li>2</li>        <li>2</li>        <li>2</li>        <li>2</li>        <li>2</li>    </ul></div>

為了區分效果，我將兩個塊分別內容設為1和2.

css 代碼

.box {    position: relative;    width: 100px;    height: 90px;    overflow: hidden;    border: solid 1px;}.col1, .col2 {    height: 200px;    position: absolute;}.col2 { top:200px; } /* 讓第二列頂著第一列的末尾*/

js 代碼

var LEN = 200;      // 一個完整捲軸的長度var x = 0;var t;window.onload = roll;function roll() {     var $col1 = document.getElementById("col1");     var $col2 = document.getElementById("col2");     var fun = function(){         $col1.style.top = x + ‘px‘;         $col2.style.top = (x + LEN) + ‘px‘;         x--;         if( (x + LEN) == 0 ){             x = 0;         }     };     t = setInterval(fun,1000);}// 可以再加上滑鼠移入停止滾動的函數

其他：

<!DOCTYPE HTML>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>無標題文檔</title>  <style>  @-webkit-keyframes move  {      0%{          left:0;      }      100%      {          left:-500px;      }     }  #wrap{ width:500px;height:100px;border:1px solid #000; position:relative;margin:100px auto; overflow:hidden;}  #list{ position:absolute;left:0;top:0;margin:0;padding:0; -webkit-animation:3s move infinite linear; width:200%;}  #list li{ list-style:none;width:98px;height:98px;border:1px solid #fff;background:#000; color:#fff; font:50px/98px Arial; text-align:center; float:left;}  #wrap:hover #list{ -webkit-animation-play-state:paused;}  </style>  </head>  <body>  <div id="wrap">      <ul id="list">          <li>1</li>          <li>2</li>          <li>3</li>          <li>4</li>          <li>5</li>          <li>1</li>          <li>2</li>          <li>3</li>          <li>4</li>          <li>5</li>      </ul>  </div>  </body>  </html>

CSS/JS實現無縫滾動字幕

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More