jquery模仿老虎机抽奖

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
这个抽奖，主要是运用背景的位置来滑动位置；

1.html编写；

html主要分为三个模块，第一个模块是奖品(class为center模块)；第二个模块是旋转的灯的效果(class为deng模块);第三个是抽奖的按钮(class为runBtn模块)；
center模块中,分为三个奖品列，每列中我加了一个跟背景一样高的空白png，主要是为了撑开li的高度，以及在不同的浏览器中不至于变形；然后在下面加入了两个渐变色的div.gradient。主要为了突出中间滑动的奖项；

旋转的等我这里写了四个div,其实可以在js中用循环，然后再赋值；实际工作中，这一块一般都是用的两张图片轮流显示

2.css样式；

这里为了感觉有霓虹灯的效果，我用了两个动画，然后一个是从显示到隐藏，一个是从隐藏到显示；

下面这个样式主要是在li中加入了所有奖品的背景图片，然后y轴重复，当滚动的时候更改这个li的背景位置；
下面这个样式是蒙在奖品上的黑色的渐变，背景色填充从深色到透明的渐变，然后另外一个旋转180度，使得页面效果是上下是深色，中间透明可以显示奖品,使中间奖品看起来更突出，中间的奖品如果三个在同一排就是中奖了；

.gradient{
        position:absolute;
        left:0;        
        right:0;
        width:100%;
        height:50%;
        background: linear-gradient(#000,transparent);        
    }
    .gradient1{       
        top:0;
    }
    .gradient2{        
        bottom:0;
        transform: rotate(180deg);
    }
复制代码

3.jquery编写；

这里主要是初始化li的背景位置；然后当点击的时候，随机了三位数，然后再取值个位、十位和百位的数值变成中奖奖品的数值；如果从后台获取的奖品可以根据奖品在li中的位置去计算数值； 下面这个run方法，就是滚动的动画，总共用时是5秒，然后前面可以根据自己的感觉改变数值；

function run(that,num){	 	
      let u = $(".first_lhjGoList ul li").height(); //盒子的高度   	
	$(that).animate({"background-position-y":u*8+(-u/6*num+u/12)},5000); //前面u*8是不管是0还是什么都滚动8圈，这个可以随意自己更改;
		};
复制代码

码上掘金效果：