jquery模仿老虎机抽奖

·  阅读 21

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

1.html编写;

html主要分为三个模块,第一个模块是奖品(class为center模块);第二个模块是旋转的灯的效果(class为deng模块);第三个是抽奖的按钮(class为runBtn模块);
center模块中,分为三个奖品列,每列中我加了一个跟背景一样高的空白png,主要是为了撑开li的高度,以及在不同的浏览器中不至于变形;然后在下面加入了两个渐变色的div.gradient。主要为了突出中间滑动的奖项;
1664076434049.png
旋转的等我这里写了四个div,其实可以在js中用循环,然后再赋值;实际工作中,这一块一般都是用的两张图片轮流显示
1664076642350.png

2.css样式;

这里为了感觉有霓虹灯的效果,我用了两个动画,然后一个是从显示到隐藏,一个是从隐藏到显示;
1664076843243.png
下面这个样式主要是在li中加入了所有奖品的背景图片,然后y轴重复,当滚动的时候更改这个li的背景位置;
image.png 下面这个样式是蒙在奖品上的黑色的渐变,背景色填充从深色到透明的渐变,然后另外一个旋转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中的位置去计算数值; 1664078107388.png 下面这个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圈,这个可以随意自己更改;
		};
复制代码

码上掘金效果:

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改