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


Posted in Javascript onAugust 06, 2015

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

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

实现效果如下图所示:

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

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery抽奖效果</title>
<style type="text/css">
*{padding:0px;margin:0px;}
body{font-size:12px;}
ul,li{ list-style:none;}
.choudiv{width:600px;margin:100px auto; position:relative;}
.choudiv .zblock{position:absolute;width:80px;height:80px; background:#09C; text-align:center;line-height:80px;}
.choudiv .li1{left:0px;top:0px;}
.choudiv .li2{left:80px;top:0px;}
.choudiv .li3{left:160px;top:0px;}
.choudiv .li4{left:240px;top:0px;}
.choudiv .li5{left:320px;top:0px;}
.choudiv .li6{left:320px;top:80px;}
.choudiv .li7{left:320px;top:160px;}
.choudiv .li8{left:240px;top:160px;}
.choudiv .li9{left:160px;top:160px;}
.choudiv .li10{left:80px;top:160px;}
.choudiv .li11{left:0px;top:160px;}
.choudiv .li12{left:0px;top:80px;}
.choudiv .zblock1{width:240px;height:80px; cursor:pointer;background:#f00; position:absolute;left:80px;top:80px; text-align:center;line-height:80px;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){ 
 $(".zblock1").on("click",function(){
  if(!$(this).hasClass("unuse")){
   $(this).addClass("unuse");
   var i=0;
   var num=parseInt(30+Math.random()*20);
   //这个后面会通过AJAX由程序给出
   var time=50;
   var j=parseInt(num/12);
   var leave=num%12;
   var oli=$("#outer").find("li"); 
   var timer=setInterval(function(){
    oli.css("opacity","1");
    if(j>0){
     if(i==12){
      i=0;
      j--;
      oli.eq(i).css("opacity","0.5");
     }else{
      oli.eq(i).css("opacity","0.5");
      i++; 
     }
    }else{
     if(i==leave){
      clearInterval(timer);
      oli.eq(i).css("opacity","0.5");
      alert("抽中了"+i+"号");
      $(".zblock1").removeClass("unuse");
     }else{
      oli.eq(i).css("opacity","0.5");
      i++;
     }
    }
   },50);
  }else{
   return false; 
  } 
 })
});
</script>
</head>
<body>
<div class="choudiv">
<ul id="outer">
 <li class="zblock li1">0</li>
 <li class="zblock li2">1</li>
 <li class="zblock li3">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>
 <li class="zblock li9">8</li>
 <li class="zblock li10">9</li>
 <li class="zblock li11">10</li>
 <li class="zblock li12">11</li>
</ul>
<div class="zblock1">开始</div> 
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
js charAt的使用示例
Feb 18 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 #Javascript
js简单实现标签云效果实例
Aug 06 #Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 #Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 #Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 #Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 #Javascript
js实现网页抽奖实例
Aug 05 #Javascript
You might like
mysql 性能的检查和优化方法
2009/06/21 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
python中子类调用父类函数的方法示例
2017/08/18 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python算法题 链表反转详解
2019/07/02 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python实现随机爬山算法
2021/01/29 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
生态养殖创业计划书
2014/05/06 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
车间核算员岗位职责
2014/07/01 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
护士个人年度总结范文
2015/02/13 职场文书
运动会3000米加油稿
2015/07/21 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
七年级话题作文之执着
2019/11/19 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python