奖品图片的初始位置要落在第一个奖品“无线耳机”，要根据奖品图片的大小来计算。定义两个变量来记住图片大小。
let totalLth = 3962 //奖品图片总长度 let itemLth = totalLth / 14 //每个奖品长度奖品图片的初始位置是整个图片的长度除以14（一共14个小图片）除以75（postcss-plugin-px2rem中定义的rootValue），再乘以0.5得到半个奖品图片的长度，单位是rem，要让图片向左移动，所以要取负值，这样正好向左移动半个图片长度，使第一个奖品正好落在指针正中央。定义变量记住这个初始偏移尺寸，如下：
locationX: -1.8866666666666667 //3962/14/75*0.5定位结果如下图7
图7
这半个图片长度是根据整个框占2个图片宽度，奖品在小图片正中间，第一个奖品图片前面有个“谢谢参与”，在整个背景的1.5个图片宽度处，所以2-1.5=0.5，最后正好落在指针处，就是正中间。 3.4 jQuery动画
jQuery动画和可以很方便的修改DOM元素的尺寸信息，包含background-position信息，参考jquery文档如下
Animation Properties and Values(动画属性和值)
所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。（例如，width, height或者left可以执行动画，但是background-color不能，除非使用jQuery.Color()插件。）属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用。
另外jQuery的动画属性也可以是一个相对值，这样我们从接口响应中获取到奖品信息后，就可以非常方便的播放第二个动画，参考jQuery文档如下：
动画属性也可以是一个相对值。如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的。
最后jQuery.animate动画提供complete回调函数指定动画完成之后要处理的事情，也可以用来按照顺序播放动画，参考jQuery文档如下：
Complete Function（完成函数）
如果提供complete回调函数将在动画完成后被执行一次。这对于按顺序执行一系列不同动画时，特别有用。这个回调函数不设置任何参数，但是this会被传递到正在执行动画的DOM元素上，如果多个元素一起做动画效果，值得注意的是这个回调函数在每个匹配元素上执行一次，不是这个动画作为一个整体。
布局有了，动画思路也有了，现在可以让背景动起来了。先让整个背景转2圈，模拟开奖，代码如下：
drawLottery() { let totalLth = 3962 //奖品图片总长度 let itemLth = totalLth / 14 //每个奖品长度 let wheel = 2 //空转2圈 //先空转 window.jQuery(\'#slotMachine\').css(\'background-position-x\', `${this.locationX}rem`) window.jQuery("#slotMachine").animate( {backgroundPositionX: `-=${((totalLth * wheel) / 75)}rem`}, {duration: 5000, easing: \'easeInOutQuint\'} ) }注意每次开始播放动画之前先让背景回到第一个奖品“无线耳机”上，不然的话连续抽检的话就对不准了。效果如下图8：
图8
从动画中可以看到，让背景滚动了2圈，2*整个背景的长度，最后正好回到原点。但是为了方便我们最后计算奖品位置，要让背景回到background-position-x: 0的位置，这样最后计算的时候可以直接用index来计算，便于理解。这里只要在backgroundPositionX基础上减去半个图片尺寸就好，如下：
图9 3.6 请求接口&第二个动画