backgroundposition和长图实现鼠标悬浮动画效果

以下图片及代码均来自 京东云

点击这里进入京东云

思路和效果图：

background-position: 0 0可以用js动态的将长图按帧数一帧一阵的展示出来效果类似gif，红框就是可视界面，当替换的速度合适的时候就变成了动画（有点像小时候看的小人书）

用到的最核心的方法是requestAnimationFrame() 类似一个定时器

1 、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

像setTimeout、setInterval一样，requestAnimationFrame是一个全局函数。调用requestAnimationFrame后，它会要求浏览器根据自己的频率进行一次重绘，它接收一个回调函数作为参数，在即将开始的浏览器重绘时，会调用这个函数，并会给这个函数传入调用回调函数时的时间作为参数。由于requestAnimationFrame的功效只是一次性的，所以若想达到动画效果，则必须连续不断的调用requestAnimationFrame，就像我们使用setTimeout来实现动

<stylt>
.nav-item-icon {
display: block;
width: 90px;
height: 90px;
margin: 0 auto 15px;
background-size: auto 90px;
background-position: 0 0;
background-repeat: no-repeat;
}
style>
<div class="nav-animation">
<div class=" nav-item-icon" style="background-image: url(img/12.png);">

div>
div>

<div class="nav-animation">
<div class=" nav-item-icon" style="background-image: url(img/12.png);">

div>
div>

<div class="nav-animation">
<div class=" nav-item-icon" style="background-image: url(img/12.png);">

div>
div>


$(function() {
$(".nav-animation").each(function() {
b(this)
});
function b(a, b) {
function c() {
//给元素动态添加属性
g.css({
"background-position": "-" + j * h + "px 0"
})
}
function d() {
h++, i > h ? (c(), f = requestAnimationFrame(d)) : cancelAnimationFrame(f)
}
function e() {
h--, h >= 0 ? (c(), f = requestAnimationFrame(e)) : cancelAnimationFrame(f)
}
var f, g = $(a).find(".nav-item-icon"),
h = 0,
i = 20,//20是图片有20帧，根据实景情况修改
j = 90;//90是图片的宽度，也就是每一帧移动的距离
$(a).hover(function() {
cancelAnimationFrame(f), f = requestAnimationFrame(d)
}, function() {
cancelAnimationFrame(f), f = requestAnimationFrame(e)
})
}
});
}