扒皮下京東首頁樓層圖標的動畫效果實現方式 - vajoy－IT工程師數位筆記本

文章出處

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

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

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

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

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

我們先做一下原型：

然后把原型先寫出來：

<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觸發更換背景事件。問題來了，這里說的“某個值”的大小應是多大呢？

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

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

$(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);
      });    
    })

})