jQuery实现九宫格抽奖游戏

# 九宫格抽奖游戏

本项目在github [链接]([https://github.com/freya0608/squaredUp](https://github.com/freya0608/squaredUp)

1. 前端布局

将未选中的和选中的图片定位好

<div class="nomal"><img class="quanNomal quan0" src="./img/quan0.png" alt=""><img class="quanNomal quan1" src="./img/quan1.png" alt="图片"><img class="quanNomal quan2" src="./img/quan2.png" alt="图片"><img class="quanNomal quan7" src="./img/quan7.png" alt="图片"><div class="chou-tap"><img class="chou"  src="./img/chou.png" alt="图片"></div><img class="quanNomal quan3" src="./img/quan3.png" alt="图片"><img class="quanNomal quan6" src="./img/quan6.png" alt="图片"><img class="quanNomal quan5" src="./img/quan5.png" alt="图片"><img class="quanNomal quan4" src="./img/quan4.png" alt="图片">
</div>
<div class="quan-border"><img class="quanq quan0_1" src="./img/quan0_1.png" alt="图片"><img class="quanq quan1_1" src="./img/quan1_1.png" alt="图片"><img class="quanq quan2_1" src="./img/quan2_1.png" alt="图片"><img class="quanq quan7_1" src="./img/quan7_1.png" alt="图片"><img class="quanq quan3_1" src="./img/quan3_1.png" alt="图片"><img class="quanq quan6_1" src="./img/quan6_1.png" alt="图片"><img class="quanq quan5_1" src="./img/quan5_1.png" alt="图片"><img class="quanq quan4_1" src="./img/quan4_1.png" alt="图片">
</div>
```图片定位的时候，class按照逆时针0.1.2.3.4.5.6.7，这样，在旋转的时候，可以容易控制图片`quan5_1.png`表示选中图片的样式；`quan5.png`没有选中图片的样式
```
$(".nomal").css({height:$(".nomal").width(),zIndex:1
});
$(".quan-border").css({height:$(".quan-border").width()
});
$(".quan0").css({"left":"9%","top":'10%'});
$(".quan0_1").css({"left":"9%","top":'10%'});
$(".quan1").css({"left":"37%","top":'10%'});
$(".quan1_1").css({"left":"37%","top":'10%'});
$(".quan2").css({"left":"65%","top":'10%'});
$(".quan2_1").css({"left":"65%","top":'10%'});
$(".quan7").css({"left":"9%","top":'37%'});
$(".quan7_1").css({"left":"9%","top":'37%'});
$(".quan3").css({"left":"65%","top":'37%'});
$(".quan3_1").css({"left":"65%","top":'37%'});
$(".quan6").css({"left":"9%","top":'64%'});
$(".quan6_1").css({"left":"9%","top":'64%'});
$(".quan5").css({"left":"37%","top":'64%'});
$(".quan5_1").css({"left":"37%","top":'64%'});
$(".quan4").css({"left":"65%","top":'64%'});
$(".quan4_1").css({"left":"65%","top":'64%'});

2 . 逻辑端处理

let end,round= 2,ms = 150; //round表示转几圈后开始抽奖，ms控制抽奖转圈速度，//end表示抽到的积分或者券
var flag = true;   //防止重复点击
$(".chou-tap").click(function (e) {console.log('click')e.preventDefault();if(!flag){return;}flag = false; // 设//end表示抽到的位子end = 5;getPrize(0,end,round,ms);function getPrize(start,end,round,interval){var nowNum = start;var myRound = round;rotation();function rotation(){if( myRound > 0 ){setTimeout(function(){nowNum++;if(nowNum > 7){nowNum = 0;myRound--;}// console.log('block',$('.quan'+nowNum+"_1"))$('.quan'+nowNum+"_1").css({"display":"block","zIndex": 2});$('.quan'+nowNum+"_1").siblings().css({"display":"none"}); //没有选中的不显示// console.log('nowNum:',nowNum,'myRound:',myRound);rotation();     //递归调用},interval);}else if(myRound === 0){  //最后一圈的时候setTimeout(function(){// console.log('nowNum:',nowNum,'myRound:',myRound);$('.quan'+nowNum+"_1").css({"display":"block","zIndex": 2});$('.quan'+nowNum+"_1").siblings().css({"display":"none"});if( nowNum != end ){nowNum++;rotation();  //在最后一圈，但是还没有到达想要的位置，继续递归。}else{//这里写弹窗flag = true;return null;}},interval)}}}});

jQuery实现九宫格抽奖游戏相关推荐

php jquery ajax九宫格抽奖,jQuery九宫格抽奖
插件描述:网页中常用的九宫格抽奖代码更新时间:2017/2/16 下午6:56:04 更新说明: 1.代码进行了优化: 2.更新了实际项目中用到的ajax接口请求,案例中注释便于展示效果: 3.主要 ...
php jquery ajax九宫格抽奖,php+jquery+ajax开发抽奖功能模块下载
php+jquery+ajax实现抽奖系统模块代码如下: 首页在抽奖前需要将所有人员的参与名单在屏幕上滚动显示,所以就用jquery实现了, 1. 参与名单将放在一个txt文件里面,我将放到 phon ...
JQUERY+HTML九宫格抽奖作业代码
#################################################################################################### ...
html+抽奖游戏,九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
投色子抽奖游戏 html,使用jQuery实现的掷色子游戏动画效果
实现原理:当色子掷出后,通过jQuery的animate()函数改变色子位移,中间加入延时效果,并变换色子背景,最终动画运行到随机产生的点数时停止,并显示掷出的点数.其实就是动画过程加入多个不同图片的 ...
php 掷,jQuery+PHP实现的掷色子抽奖游戏实例
jQuery+PHP实现的掷色子抽奖游戏实例发布于 2016-01-23 05:44:43 | 334 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypert ...
投色子抽奖游戏 html,jQuery实现简单的抽奖游戏
今天要写的是,利用jQuery写一个抽奖的案例,页面包含四个组件,两个按钮分别是开始和停止的按钮.两个box,分别盛放人员和奖品.当点击开始按钮时,人员不停地进行切换.抽奖的box中显示等待抽奖结果. ...
自定义顺序/九宫格抽奖
效果唠叨用一个数组决定外发光边框停留的顺序取一个随机数,加上之前定好的圈数*盲盒个数,确认最后的奖品是哪个(随机数可后端返回) 根据变换定时的时间,改变每一圈运动的速度注意:排序的数组和最后奖 ...
九宫格抽奖转盘源码分析
效果如上图所示,下面对其实现代码进行分析,看能不能破解其抽奖规则.需要引入jquery-1.8.3.min.js和images/9张图片. <!DOCTYPE html PUBLIC ...

jQuery实现九宫格抽奖游戏

jQuery实现九宫格抽奖游戏相关推荐

最新文章

热门文章