jQuery实现类似老虎机滚动抽奖效果

本文实例讲述了jQuery实现类似老虎机滚动抽奖效果。分享给大家供大家参考。具体如下：

这里使用jquery实现类似老虎机的网页抽奖功能，只是一个简单的投资功能实现，还有一些地方是需要完善的，比如抽奖快结束的时候，不会自动变慢速度，哪位高手感兴趣的话可以加以完善。

实现效果如下图所示：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery抽奖效果/title style type=' text/CSS ' * { padd :0 px；margin :0 px } body { font-size :12 px；}ul、李{列表式：无；}.choudv { width :600 pxmargin :100 px auto位置：相对；}.choudiv .zblock { position:absolute宽度：80 px高度：80 px背景# 09C文本对齐：居中；线高：80 px}.choudv . li1 { left :0 pxtop :0 px }。choudv . li2 { left :80 pxtop :0 px }。Chou div Li { left :160 pxtop :0 px }。choudv . li4 { left :240 pxtop :0 px }。choudv . li5 { left :320 pxtop :0 px }。choudv . li6 { left :320 pxtop :80 px }。choudv . li7 { left :320 pxtop :160 px }。choudv . li8 { left :240 pxtop :160 px }。choudv . li9 { left :160 pxtop :160 px }。choudv . li10 { left :80 pxtop :160 px }。choudv . li11 { left :0 pxtop :160 px }。choudv . li12 { left :0 pxtop :80 px }。乔德夫。zblock 1 { width :240 px高度：80 px光标：指针指针；背景技术# f00位置：绝对；left:80pxtop:80px文本对齐：居中；线高：80 px}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .1 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $(。zblock1 ').on('click '，function(){ if(！$(这个)。有类(' unuse '){ $(this).addCLaSS(' unuse ')；var I=0；var num=parsent(30数学。random()* 20)；//这个后面会通过创建交互式、快速动态网页应用的网页开发技术由程序给出变化时间=50;var j=ParSeint(num/12)；var leave=num；var oli=$('#outer ').find(' Li ')；var timer=setInterval(function(){ oli。' CSS('不透明度',' 1 ');if(j0){ if(I==12){ I=0；j-；oli.eq(i).css(“”不透明度',' 0.5 ');}else{ oli.eq(i).css(“”不透明度',' 0.5 ');我；} } else { if(I==leave){ clearInterval(计时器);oli.eq(i).css(“”不透明度',' 0.5 ');警报('抽中了我号');$(.zblock 1 ').移除CLaSS(' unuse ')；}else{ oli.eq(i).css(“”不透明度',' 0.5 ');我；} } },50);} else { return false } })})；/script/head dydiv=' choudv ' ul id=' outer ' Li class=' zblock li1 ' 0/Li Li class=' zblock li2 ' 1/Li Li class=' zblock li2 ' 2/Li Li class=' zblock li4 ' 3/Li Li class=' zblock li5 ' 4/Li Li class=' zblock li6 ' 5/Li Li class=' zblock li7 ' 6/Li Li class=' zblock li8 ' 7/Li class=' zblock li9 ' 8/Li开始/div /div/body/html希望本文所述对大家的jquery程序设计有所帮助。