欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

結(jié)合 CSS3 transition transform 實現(xiàn)簡單的跑馬燈效果的示例

  發(fā)布時間：2018-02-07 15:30:53   作者：王鐵手   我要評論
這篇文章主要介紹了結(jié)合 CSS3 transition transform 實現(xiàn)簡單的跑馬燈效果的示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

這是之前客戶的一個需求，給的 demo 是用 gif 實現(xiàn)跑馬燈，但是我們的沒法用 gif，因為圖上的文字需要翻譯成各國語言，所以不能使用圖片來實現(xiàn)，那么，自己寫一個咯。

思考過程

html

<div lantern>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

css

* {
  margin: 0;
  padding: 0;
}

[lantern] {
  overflow: hidden;
}

ul {
  white-space: nowrap;
  font-size: 0;
  transform: translateX(0);
  transition: transform 0s linear;
}

li {
  width: 50vw;
  border: 1px solid red;
  display: inline-block;
  height: 30px;
  font-size: 16px;
}

js

function lantern($element,speed = 10) {
    let liWidth = 0;
    let $ul = $element.find("ul");

    function run(init = false) {
      let $li = $ul.find("li").first();
      liWidth = $li.outerWidth();

      if(!init){
        $ul.append($li[0].outerHTML);
        $li.remove();
      }
      
      $ul[0].style.transitionDuration = "0s";
      $ul[0].style.transform = "translateX(0)";

      setTimeout(function() {
        $ul[0].style.transitionDuration = speed + "s";
        $ul[0].style.transform = "translateX(-" + liWidth + "px)";
      }, 20);
    }

    run(true);
    setTimeout(() => {
      setInterval(run, speed * 1000);
    }, 0);
  }
 
lantern($('[lantern]'), 20);

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • css3 中translate和transition的使用方法

    這篇文章主要介紹了css3 中translate和transition的使用方法,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-03-26

  • CSS3之transition實現(xiàn)下劃線的示例代碼

    這篇文章主要介紹了CSS3之transition實現(xiàn)下劃線的示例代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-30

  • 詳解css3 Transition屬性（平滑過渡菜單欄案例）

    這篇文章主要介紹了詳解css3 Transition屬性（平滑過渡菜單欄案例）的相關(guān)資料,需要的朋友可以參考下
    2017-09-05

  • CSS3 transition 實現(xiàn)通知消息輪播條

    這篇文章主要介紹了CSS3 transition 實現(xiàn)通知消息輪播條,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-10-14

最新評論