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 相关文章推荐
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
详解vue 命名视图
Aug 14 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 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
十天学会php之第六天
2006/10/09 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
js实现录音上传功能
2019/11/22 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
python服务器与android客户端socket通信实例
2014/11/12 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python映射拆分操作符用法实例
2015/05/19 Python
Python Requests 基础入门
2016/04/07 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
在职研究生自我鉴定
2013/10/16 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
关于旅游的活动方案
2014/08/15 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
农业项目合作意向书
2015/05/08 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
python turtle绘图
2022/05/04 Python
Redis基本数据类型List常用操作命令
2022/06/01 Redis