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 相关文章推荐
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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编程语言开发动态WAP页面
2006/10/09 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
js实现简单的倒计时
2021/01/28 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
python使用PyFetion来发送短信的例子
2014/04/22 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
简单理解Python中的装饰器
2015/07/31 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
深入浅出学习python装饰器
2017/09/29 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python扩展内置类型详解
2018/03/26 Python
pandas数据处理进阶详解
2019/10/11 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
外企财务年会演讲稿
2014/01/03 职场文书
七一建党节演讲稿
2014/09/11 职场文书
2014年应急工作总结
2014/12/11 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
刑事附带民事代理词
2015/05/25 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis