background-position和长图实现鼠标悬浮动画效果

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

点击这里进入京东云

思路和效果图：

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