首页 > 代码库 > 扒皮下京东首页楼层图标的动画效果实现方式

扒皮下京东首页楼层图标的动画效果实现方式

京东首页的楼层图标默认是灰色的,但拉动滚动条,让该图标从下方挪动到屏幕正中的时候,该图标会显示出从上到下由灰变绿的动画效果,如下图

这种效果很有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);      });        })})

共勉~