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 相关文章推荐
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
js实现随机点名小功能
Aug 17 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
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面向对象学习之parent::关键字
2017/01/18 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
Django 中 cookie的使用
2017/08/17 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
JS变量及其作用域
2017/03/29 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
python结合API实现即时天气信息
2016/01/19 Python
彻底搞懂Python字符编码
2018/01/23 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
实例详解Python装饰器与闭包
2019/07/29 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
小学生操行评语
2014/04/22 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
民事辩护词范文
2015/05/21 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
情人节单身感言
2015/08/03 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL