京東首頁的樓層圖標默認是灰色的，但拉動滾動條，讓該圖標從下方挪動到屏幕正中的時候，該圖標會顯示出從上到下由灰變綠的動畫效果，如下圖
這種效果很有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); }); }) })
共勉~