这期内容当中小编将会给大家带来有关如何在PHP中使用jQuery +实现一个掷色子抽奖游戏,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<强> HTML部分:
首先我们需要准备两粒色子和奖品素材,这些作者已经打包上传了,请大家放心下载。我们将在HTML页面中写下如下的HTML结构代码,。用包装来放置色子和提示信息,#奖则是用来放置奖品的。
代码如下:
& lt; div类=& # 39;演示# 39;比;
,,,& lt; div类=& # 39;包# 39;比;
,,,,,,,& lt; div id=& # 39;味精# 39;祝辞& lt;/div>
,,,,,,,,,,& lt; div id=& # 39;骰子# 39;祝辞& lt;跨类=& # 39;骰子dice_1& # 39;id=& # 39; dice1& # 39;祝辞& lt;/span>
,,,,,,,& lt;跨类=& # 39;骰子dice_6& # 39;id=& # 39; dice2& # 39;祝辞& lt;/span> & lt;/div>
,,,& lt;/div>
,,,& lt; ul id=& # 39;奖# 39;比;
,,,,,,,李& lt; id=& # 39; d0 # 39;祝辞& lt; img src=https://www.yisu.com/zixun//0. gif图像的alt="开始的>
,,,,,,,李& lt; id=& # 39; d_1& # 39;祝辞& lt; img src=https://www.yisu.com/zixun//1. gif图像的alt="现金100元>
,,,,,,,李& lt; id=& # 39; d_2& # 39;祝辞& lt; img src=https://www.yisu.com/zixun//2. gif图像的alt="泰迪熊宝宝”>
,,,,,,,李& lt; id=& # 39; d_3& # 39;祝辞& lt; img src=https://www.yisu.com/zixun//7. gif图像的alt="谢谢参与“>
,,,,,,,李& lt; id=& # 39; d_4& # 39;祝辞& lt; img src=https://www.yisu.com/zixun//3. gif图像的alt=' iphone 5 s '>
,,,,,,,李& lt; id=& # 39; d_5& # 39;祝辞& lt; img src=https://www.yisu.com/zixun//4. gif图像的alt="笔记本电脑'>
,,,,,,,李& lt; id=& # 39; d_6& # 39;祝辞& lt; img src=https://www.yisu.com/zixun//7. gif图像的alt="谢谢参与“>
,,,,,,,李& lt; id=& # 39; d_7& # 39;祝辞& lt; img src=https://www.yisu.com/zixun//5. gif图像的alt="单反相机”>
,,,,,,,& lt;李id=& # 39; d_8& # 39;祝辞& lt; img src=https://www.yisu.com/zixun//6. gif图像的alt="轿车'>
,,,,,,,李& lt; id=& # 39; d_9& # 39;祝辞& lt; img src=https://www.yisu.com/zixun//7. gif图像的alt="谢谢参与“>
,,,& lt;/ul>
& lt;/div>
<强> CSS部分:
我们要用CSS技术来将页面布局合理规范化,我们将奖品围成一个矩形,共10个位置,将两粒色子定位在矩形的中央,抽奖时可以直接点击中间的色子。这些我们可以用CSS的定位技术来实现页面布局。
代码如下:
.demo{宽度:650 px;身高:420 px;保证金:60 px汽车10 px汽车;位置:相对;}
.wrap{宽度:200 px;身高:100 px;位置:绝对的;margin-left: 220 px;margin-top: 140 px;z - index: 1000;}
#味精{显示:没有,宽度:50 px;高度:20 px;填充:4 px;背景:# ffc;边界:1 px固体# fc9;,
text-align:中心;颜色:# + 30;字体大小:18 px;位置:绝对的;z - index: 1001;右:-20 px;上图:-10 px}
.dice{宽度:90 px;身高:90 px;显示:块;浮:左;背景:url (dice.png)不再重演;光标:指针}
# dice_mask{宽度:200 px;身高:100 px;背景:# fff;透明度:0;位置:绝对的;上图:0;左:0;z - index: 999}
。dice_1{背景位置:5 px 4 px}
。dice_2{背景位置:5 px -107 px}
。dice_3{背景位置:5 px -212 px}
。dice_4{背景位置:5 px -317 px}
。dice_5{背景位置:5 px -427 px}
。dice_6{背景位置:5 px -535 px}
。dice_t{背景位置:5 px -651 px}
。dice_s{背景位置:5 px -763 px}
。dice_e{背景位置:5 px -876 px}
#奖{位置:相对}
#李奖{:绝对;宽度:150 px;身高:112 px;边界:1 px固体# d3d3d3}
# d0{左:0;:# d_1 {0}
左:160 px;:# d_2 {0}
左:320 px;:# d_3 {0}
左:480 px;:# d_4 {0}
左:480 px;上图:128 px}
# d_5{左:480 px;上图:256 px}
# d_6{左:320 px;上图:256 px}
# d_7{左:160 px;上图:256 px}
# d_8{左:0;上图:256 px}
# d_9{左:0;上图:128 px}
。面具{不透明度:0.6;宽度:150 px;身高:112 px;行高:32像素;背景:# ffc;,
z - index: 1001;位置:绝对的;上图:0;左:0;text-align:中心;字体大小:16 px}
<强> jQuery部分:
我们使用jQquery来完成前端动作,包括掷色子动画,仿大富翁奖品逐步运动动画,其中有防重复点击知识,ajax交互知识,动画提示知识。整个操作流程可简单概括为:点击色子→向dice.php发送ajax请求→完成掷色子动画→提示点数→逐步运动动画到最终奖品位置停止→完成抽奖。
代码如下:
$(函数(){
,,,$(& # 39;#骰子# 39;).click(函数(){
,,,,,,,美元(& # 39;#李奖.mask& # 39;) .remove ();
,,,,,,,美元(& # 39;.wrap& # 39;) .append (& # 39; & lt; div id=& # 39; dice_mask& # 39;祝辞& lt;/div> & # 39;);//加遮罩
