jquery九宫格抽奖插件源码_jquery模拟老虎机转盘抽奖特效代码-插件特效-ICode联盟

一款使用jquery制作的九宫格抽奖转盘特效代码。该jquery九宫格抽奖转盘特效模拟手机端app的抽奖天天送豪礼页面，用户可以点击抽奖按钮来随机获取奖品。使用方法在页面中引入jquery.min.js文件。 HTML结构该九宫格抽奖转盘特效使用的HTML结构是一个表格：

CSS样式为九宫格抽奖转盘添加下面的CSS样式。#lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}#lottery table{background-color:yellow;}#lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999}#lottery table td img{display:block;width:190px;height:170px;}#lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url(img/9.jpg) no-repeat top center;}#lottery table td a:hover{background-image:url(img/11.jpg);}#lottery table td.active .mask{display:block;}.mask{????width:100%;????height:100%;????position:absolute;????left:0;????top:0;????background-color: rgba(252,211,4,0.5);????display:none;}????????????? JavaScript在页面DOM元素加载完毕之后，使用下面的jquery代码来完成九宫格抽奖转盘的抽奖功能。var lottery={ index:-1, //当前转动到哪个位置，起点位置 count:0, //总共有多少个位置 timer:0, //setTimeout的ID，用clearTimeout清除 speed:20, //初始转动速度 times:0, //转动次数 cycle:50, //转动基本次数：即至少需要转动多少次再进入抽奖环节 prize:-1, //中奖位置 init:function(id){ if ($("#"+id).find(".lottery-unit").length>0) { $lottery = $("#"+id); $units = $lottery.find(".lottery-unit"); this.obj = $lottery; this.count = $units.length; $lottery.find(".lottery-unit-"+this.index).addClass("active"); }; }, roll:function(){ var index = this.index; var count = this.count; var lottery = this.obj; $(lottery).find(".lottery-unit-"+index).removeClass("active"); index += 1; if (index>count-1) { index = 0; }; $(lottery).find(".lottery-unit-"+index).addClass("active"); this.index=index; return false; }, stop:function(index){ this.prize=index; return false; }}; function roll(){ lottery.times += 1; lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化 if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) { clearTimeout(lottery.timer); lottery.prize=-1; lottery.times=0; click=false; }else{ if (lottery.times lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) { lottery.speed += 110; }else{ lottery.speed += 20; } } if (lottery.speed<40) { lottery.speed=40; }; lottery.timer = setTimeout(roll,lottery.speed);//循环调用 } return false;} var click=false; window.onload=function(){ lottery.init('lottery'); $("#lottery a").click(function(){ if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应 return false; }else{ lottery.speed=100; roll(); //转圈过程不响应click事件，会将click置为false click=true; //一次抽奖完成后，设置click为true，可继续抽奖 return false; } });};

jquery九宫格抽奖插件源码_jquery模拟老虎机转盘抽奖特效代码

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

未经允许不得转载： ICode联盟 » 插件特效 » jquery九宫格抽奖插件源码_jquery模拟老虎机转盘抽奖特效代码

猜你喜欢更多»

项目推荐更多»

[开源]基于 Vue、Datav、Echart 框架的数据大屏项目，可自由替换 (1)

[开源]一套企业级微服务框架、微服务能力开放平台，功能强大 (0)

[开源]免费开源的流程设计器，开箱即用，助力流程开发使用更简单 (0)

[开源]MIT开源协议，前后端分离、美观大方后台通配权限管理系统 (1)

[开源]一款终端仿真软件，支持多种后端协议，无依赖跨平台使用 (0)