單行文字垂直/水平跑馬燈效果

時間 2019-12-13

標籤單行文字垂直水平馬燈效果简体版

原文原文鏈接

需求描述

接到的需求是這樣的：跑馬燈效果一次展現一行文字循環滾動文字滾動到視野中停留一秒後滾出。
靜態效果以下圖，文字從下往上或者從右往左滾動，滾動到此位置時停留一秒（不會傳動圖...
javascript

網絡上有比較多的多行文字循環滾動的demo,找了一下好像能知足單行而且可停留一秒的比較少（emmm可能我沒認真找
下面貼出個人最終解決方案。css

解決方案

垂直方向滾動

使用一個定時器不斷改變最外層div的scrollTop，爲了能循環滾動，增長一個與con1同樣的con2
PS：這裏的time選用1000/60是由於想要模擬window.requestAnimationFrame(通常1000ms60幀，固然了，你也能夠直接使用requestAnimationFrame代替setInterval，效果更好html

<!DOCTYPE html>
<html>
<head>
    <title>單行文字垂直跑馬燈效果</title>
    <style type="text/css">
    ul,li{
        list-style:none;
        display:block;
        margin: 0;
        padding: 0;
    }
    #loop-show-box {
      width: 300px;
      height: 25px;
      line-height: 25px;
      background: red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      overflow: hidden;
    }
    .li-style {
      width: 100%;
      height: 25px;
      text-align: center;
    }
    </style>
</head>
<body>
<div id="loop-show-box">
  <ul id="con1">
    <li class="li-style">測試1號</li>
    <li class="li-style">測試2號</li>
    <li class="li-style">測試3號</li>
    <li class="li-style">測試4號</li>
  </ul>
  <ul id="con2"></ul>
</div>
<script type="text/javascript">
  var area = document.getElementById('loop-show-box');
  var con1 = document.getElementById('con1');
  var con2 = document.getElementById('con2');
  var mytimer1 = null;
  var mytimer = null;
  var time = 1000 / 60;
  con2.innerHTML = con1.innerHTML;
  function scrollUp () {
    if (area.scrollTop >= con1.offsetHeight) {
      area.scrollTop = 0;
    } else {
      if (area.scrollTop % 25 == 0) {
        clearInterval(mytimer);
        clearInterval(mytimer1);
        mytimer1 = setTimeout(function () {
          mytimer = setInterval(scrollUp, time);
        }, 1000);
      }
      area.scrollTop++;
    }
  }
  mytimer = setInterval(scrollUp, time);
</script>
</body>
</html>

水平方向滾動

水平方法滾動的具體實現其實跟垂直方向相似的，不一樣的是要改變的是容器的scrollLeftjava

<!DOCTYPE html>
<html>
<head>
  <title>單行文字水平跑馬燈效果</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    .container {
      width: 400px;
      height: 25px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin: 100px auto;
    }
    .icon {
      width: 15px;
      margin-right: 15px;
    }
    #loop-show-box {
      width: 300px;
      height: 25px;
      line-height: 25px;
      background: red;
      overflow: auto;
      white-space: nowrap;
    }
    .li-style {
      width: 300px;
      height: 25px;
      text-align: left;
      /*使用inline-block的時候兩個item之間會存在間距（固然了你能夠把它們寫在一行以去除這樣的間距*/
      display: inline-flex;
    }
    #con1,#con2 {
      display: inline-flex;
    }
  </style>
</head>
<body>
<div class="container">
  <img src="img/horn.png" class="icon">
  <div id="loop-show-box">
    <div id="con1">
      <div class="li-style">測試1號</div>
      <div class="li-style">測試2號</div>
      <div class="li-style">測試3號</div>
      <div class="li-style">測試4號</div>
      <div class="li-style">測試5號</div>
      <div class="li-style">測試6號</div>
    </div>
    <div id="con2"></div>
  </div>
</div>
<script type="text/javascript">
  var area = document.getElementById('loop-show-box');
  var con1 = document.getElementById('con1');
  var con2 = document.getElementById('con2');
  var mytimer1 = null;
  var mytimer = null;
  var time = 1000 / 60;
  con2.innerHTML = con1.innerHTML;
  function scrollUp () {
    if (area.scrollLeft >= con1.offsetWidth) {
      area.scrollLeft = 0;
    } else {
      // 可根據想要的速度調節步長
      area.scrollLeft += 2;
      if (area.scrollLeft % 300 == 0) {
        clearInterval(mytimer);
        clearInterval(mytimer1);
        mytimer1 = setTimeout(function () {
          mytimer = setInterval(scrollUp, time);
        }, 1000);
      }
    }
  }
  mytimer1 = setTimeout(function () {
    mytimer = setInterval(scrollUp, time);
  }, 1000)
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。