js循環精靈圖

js循環精靈圖

循環精靈圖可以不用在給每一個小塊一 一的修改位置。
主要原理是找到整張的背景圖與li的下標的數學關係

左側是一大張背景圖 右側是成品是預覽圖

這個背景圖的位置其實是有規律的，每兩張之間間隔一個固定長度，這個固定長度剛好等於一個小圖標的長度，我們使用的這個圖間隔44px。

		<script type="text/javascript">
			var lis = document.querySelectorAll("li");
			//核心代碼區域
			for(var i=0;i<lis.length;i++){
				var index = i*44;
				
				lis[i].style.backgroundPosition = "0 -"+ index + "px";
			}
		</script>