jQuery实现简易数字摇奖程序
来源:互联网 发布:专业美工 编辑:程序博客网 时间:2024/04/29 17:29
实现思路:首先用random生成一个四位的随机数,转换为字符串并分割返回成数组。利用each()遍历每一个.num的元素,设置其backgroundPositionY来实现滚动的效果。
使用到jQuery Easing plugin:http://gsgd.co.uk/sandbox/jquery/easing/
相关代码
HTML
<head><script type="text/javascript" src="js/jquery-1.11.0.js"></script><script type="text/javascript" src="js/easing.js"></script></head><div class="res"></div><div class="num_box"><div class="num"></div><div class="num"></div><div class="num"></div><div class="num"></div><div class="btn">开始摇奖</div></div>
CSS
html,body{margin: 0;padding: 0;overflow: hidden;}body{ background: #eee;}.res{text-align: center;margin-top: 100px;}.num_box{height:450px; width:750px;position:absolute;left:50%;top:140px;margin-left:-370px;z-index:8;overflow:hidden;text-align:center;}.num_box .num{background:url(images/num.png) top center repeat-y #ccc;width:181px;height:265px;float:left;margin-right:6px;}.num_box .btn{background-color:#89ec6a;width:264px;height:68;position:absolute;left:50%;top:300px;margin-left:-132px;cursor:pointer;clear:both; line-height: 60px;border-radius: 10px;}
JS
/*获得随机数*/function getRanNum(){ var x=9999; //最大上限var y=1111;//下限var ranNum = parseInt(Math.random()*(x-y)+y);return ranNum;}var isBegin=false; //用于判断是否正在执行$(function(){var imgH=265; //每张数字图片高度$('.btn').click(function(){if(isBegin){return false;} //正在执行摇奖时,防止再次点击按键执行isBegin=true;var ranNum=getRanNum(); $('.res').html('摇奖结果:'+ranNum);$('.num').css('backgroundPositionY',0);var numArr=(ranNum+'').split(''); //获取随机数转换为字符串并分割返回为数组$('.num').each(function(index){var ele=$(this); //当前元素jquery对象setTimeout(function(){ //延迟执行ele.animate({'backgroundPositionY':(imgH*50)-(imgH*numArr[index]) },{duration: 6000+index*3000,easing: "easeInOutCirc",complete: function(){if(index==3) isBegin = false;} });},300*index);});//end each()});});
效果:
源代码:
http://download.csdn.net/detail/monarch_lin/7096489
0 0
- jQuery实现简易数字摇奖程序
- 摇奖程序
- 初识委托和线程并实现一个简单摇奖程序
- VB.NET小程序实现3D摇奖
- VB编写摇奖程序
- 双色球 摇奖程序
- 模拟双色球摇奖程序
- php摇奖程序
- 用多线程实现“摇奖机”
- jQuery实现简易登录框
- 简易抽签程序(数字滚动 HTML + JavaScript)
- 中国福利彩票“双色球”摇奖算法Java实现代码
- jQuery实现数字滚动
- 一种简易数字波形存储器的实现
- 简易画图程序(实现橡皮筋功能)
- 利用socket实现简易聊天程序
- 简易聊天程序的python实现
- Android程序:简易浏览器的实现(WebView)
- linux中强大且常用命令:find、grep
- checkio (数独)
- 一口一口吃掉Struts(十)——异常自动处理机制 .
- GSOAP 在一个客户端内调用多个服务出现的问题解决
- MySQL存储过程详解 mysql 存储过程
- jQuery实现简易数字摇奖程序
- android中的后退键——onBackPressed()的使用
- ARC 类型转换:显示转换 id 和 void *
- sde
- bootstrap学之模式对话框加载另一jsp页面内容
- 华为编程大赛--字符串匹配
- 堆内存栈内存详解
- D3D 的D3DXMatrixLookAtLH矩阵的计算过程
- DATAPUMP 导出TIPS