上次讲到lao虎机抽奖，通过jquery.animate修改background-prosition-y来修改背景图片实现上下滚动动画，本文介绍一种左右滚动的动画，原理是一样的，这里通过修改background-prosition-x来实现动画，同时也要注意奖品图片的尺寸问题，这里姑且叫它滚动抽奖。先看高保，如下图1：
图1
需求如下：
奖品图片横排列。
用户点击抽奖，奖品依次向左滚动，先空转2圈。
请求抽奖接口，待接口有返回后，根据接口返回的结果固定在某个奖品上。
注意这里每个奖品图片的宽度要是固定的，否则在计算奖品图片位置的时候对不准，这个要和UI设计人员事先约定，做好沟通。
2. 整体思路 2.1 奖品顺序为了最后选中奖的奖品，要按照图片的顺序定义奖品数据的顺序，最后使用奖品数组的index来计算滚动位置并播放第二个动画，所以定义奖品数组的时候要按照奖品的背景图片中的殊勋保持一致，方便动画定位。
2.2 background-prosition-xbackground-position为每一个背景图片设置初始位置。 这个位置是相对于由background-origin定义的位置图层的。background-origin有三种取值，如下：
border-box
背景图片以border区域为参考，默认值
padding-box
背景图片以padding区域为参考
content-box
背景区域以content区域为参考
background-position定义一对x/y坐标，来放置背景图片，它可以被定义成一个值或两个值，如果被定义成两个值，第一个值代表水平位置，第二个代表垂直位置。如果只指定一个值，则第二个值为center。
也可以单独设置x坐标或y坐标，例如background-position-x用来设置背景图片水平方向的位置。
background-position-x为0时，背景图片与容器左边界对齐，如果background-position-x为20px时，图片相对容器向右偏移20px，前面20px是空白，看上去是一个放在容器中间的图片。如下图2
图1
相反，如果background-position-x为-20px时，背景图片从向左偏移20px，图片有20px被遮盖了，如下图3
图3
使用jQuery.animate函数来不断修改background-prosition-x，并且设置repeat，这样看起来就是图片在滚动了，这个抽奖动画的原理就是这样。 2.3 定位奖品
最后请求接口，通过奖品属性prizeId找到这个奖品在数组中的下标index，根据index和图片宽度计算background-position-x。
3. 实现过程 3.1 布局UI提供了背景图片和奖品图片，这里主要使用relative，absolute定位的方式来布局。如下图4首先使真个抽奖块的背景图。注意从高保中可以看到整个空白的框中的长度是2个奖品图片的长度，这个在后后面给奖品图片定位的时候会用到。
图3
然后再把奖品图片作为背景图片放在这个框中。这个奖品图片如下图4
图4
放在抽奖框中的效果如下图5
图4
然后修饰一下，在两边用阴影，让它看起来像有一个弧度，类似手机上的曲面屏，如下图5。
图5
最后给加上抽奖按钮和指针图片，效果如下图6
图6 3.2 奖品顺序
上图4中UI给出了奖品顺序，那定义奖品数组的时候就要按照这个顺序来了。注意奖品图片中“谢谢合作”和“无线耳机”重复出现了2次，这是为了使背景滚动起来看上去连贯一点，没有什么用，实际奖品是从“无线耳机”开始到“谢谢参与”结束，定义数据如下：
prizeList: [ {prizeId: \'100860911\', index: 0, prizeName: \'AirPods2代无线耳机\'}, {prizeId: \'100860910\', index: 1, prizeName: \'20元优惠\'}, {prizeId: \'100860909\', index: 2, prizeName: \'10元优惠\'}, {prizeId: \'100860908\', index: 3, prizeName: \'5元优惠券\'}, {prizeId: \'100860907\', index: 4, prizeName: \'2元现金加赠券\'}, {prizeId: \'100860904\', index: 5, prizeName: \'1元优惠券\'}, {prizeId: \'100860903\', index: 6, prizeName: \'1元优惠券\'}, {prizeId: \'100860902\', index: 7, prizeName: \'5元满减券\'}, {prizeId: \'100860901\', index: 8, prizeName: \'2元满减券\'}, {prizeId: \'100860906\', index: 9, prizeName: \'0.5元现金券\'}, {prizeId: \'100860905\', index: 10, prizeName: \'0.2元现金券\'}, {prizeId: \'100860900\', index: 11, prizeName: \'谢谢参与\'} ] 3.3 初始位置