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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php创建类并调用的实例方法
2019/09/25 PHP
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
通过实例解析Python return运行原理
2020/03/04 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
python中Django文件上传方法详解
2020/08/05 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
预备党员党课思想汇报
2014/01/13 职场文书
高一化学教学反思
2014/02/05 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
讲党性心得体会
2014/09/03 职场文书
学术会议通知
2015/04/15 职场文书
余世维讲座观后感
2015/06/11 职场文书
新入职员工工作总结
2015/10/15 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python