扒皮下京東首頁樓層圖標的動畫效果實現方式

時間 2019-11-18

標籤扒皮京東首頁樓層圖標動畫效果實現方式简体版

原文原文鏈接

京東首頁的樓層圖標默認是灰色的，但拉動滾動條，讓該圖標從下方挪動到屏幕正中的時候，該圖標會顯示出從上到下由灰變綠的動畫效果，以下圖css

這種效果頗有Lazyload的範，也是挺吸引眼球的交互方式，下面用JQ來仿造下這種效果的實現方式，其實挺簡單。html

首先我是作了2個gif分別做爲圖標的默認狀態和動畫狀態（注意第二個gif的動畫效果只顯示一次，不循環的，並且是從下往上<作的着急了點，跟京東的動畫方向相反了哈哈>，錯過效果的朋友請刷新吧）：jquery

P.S. 京東的動畫效果並不是用動態gif實現的，而是一灰一綠倆靜態圖標以CSSsprite的方式做爲兩個疊加容器的背景（注意背景的垂直方位應設爲top），綠色背景的容器默認高度爲0，加載動畫的時候用animate將其高度鋪滿。但這裏爲了簡單，我用一個動態gif來實現動畫效果。瀏覽器

先理一下思路，咱們但願作到的是，一個元素的默認背景是灰色圖標，當該元素向上挪動到用戶屏幕正中位置的時候，則切換爲綠色動畫圖標。動畫

咱們先作一下原型：this

而後把原型先寫出來：url

<html>
<head>
<style>
.long{width:500px; height:1200px;}
.long2{width:500px; height:500px;}
span{display:block; padding:8px 0 8px 26px; background:url(gray.gif) left center no-repeat; font-size:25px;}
</style>
<script src="jquery-1.11.1.js"></script>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>

<body>
  <div class="long">
  此處是緩衝區
  </div>
  <div class="long2">
      <span>1F</span>
  </div>
  <div class="long2">
      <span>2F</span>
  </div>
  <div class="long2">
      <span>3F</span>
  </div>
</body>
</html>

接着開始構思腳本如何實現，咱們這裏的效果原理僅僅是「替換span背景」，而觸發效果的條件是「圖標的頂部恰好夠到用戶屏幕的中央」，那麼咱們大能夠監聽瀏覽器滾動事件，對於某個span來講，若$(window).scrollTop大於等於某個值的時候，則該span觸發更換背景事件。問題來了，這裏說的「某個值」的大小應是多大呢？spa

畫個圖分析下，假設第一個span恰好到達其觸發事件的位置，那應該是這樣的：code

顯而易見，當scrollTop + 1/2屏幕高度 >= span距離頁面頂部距離時，可觸發該span切換背景的事件。腳本以下：htm

$(function(){
    $(window).scroll(function(){
      $("span","div").each(function(i) {
          var win_h = $(window).height();
          var win_t = $(window).scrollTop();
          var span_t = $(this).offset().top;
          if( win_h/2 + win_t >= span_t )
          $(this).css("background","url(green.gif) left center no-repeat");
      });    
    })
})

固然這裏還沒考慮$(window).resize事件，並且觸發的回調事件隔離開來會更好一些：

$(function(){
    var changeIcon = function(elm){
        //觸發事件
        var win_h = $(window).height();
        var win_t = $(window).scrollTop();
        var span_t = $(elm).offset().top;
        if( win_h/2 + win_t >= span_t )
        $(elm).css("background","url(green.gif) left center no-repeat");
    }
    
    
    $(window).on("scroll resize", function(){
      $("span","div").each(function(i,e) {
          changeIcon(e);
      });    
    })

})