jQuery手机九宫格抽奖代码

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div class="shanDeng" id="deng">

<div id="luck">

<table style="border-spacing:.08rem .03rem;">

<tr>

<td class="luck-unit luck-unit-0"><img src="./img/01.png"></td>

<td class="luck-unit luck-unit-1"><img src="./img/02.png"></td>

<td class="luck-unit luck-unit-2"><img src="./img/03.png"></td>

</tr>

<tr>

<td class="luck-unit luck-unit-7"><img src="./img/05.png"></td>

<td class="cjBtn" id="btn"></td>

<td class="luck-unit luck-unit-3"><img src="./img/01.png"></td>

</tr>

<tr>

<td class="luck-unit luck-unit-6"><img src="./img/02.png"></td>

<td class="luck-unit luck-unit-5"><img src="./img/04.png"></td>

<td class="luck-unit luck-unit-4"><img src="./img/03.png"></td>

</tr>

</table>

</div>

</div>

<div class="rule">

抽奖活动规则

1、单次加油满200元,可抽奖一次;

2、各种奖券使用规则详见该奖券的使用说明;

3、奖券请在有效期内使用或者分享给其他朋友,过期无效

</div>

<div class="play">

<span></span><div class="div">

<div id="demo" class="qimo8">

<div class="qimo">

<div id="demo1">

<ul>

<li>获得一等奖</li>

<li>获得四等奖</li>

<li>获得三等奖</li>

<li>获得二等奖</li>

<li>获得四等奖</li>

<li>获得三等奖</li>

<li>获得二等奖</li>

<li>获得三等奖</li>

</ul>

</div>

<div id="demo2"></div>

</div>

</div>

</div>

4、书写css代码。

body { background-image: url(../img/bg-img.png); background-repeat: no-repeat; background-size: 100% 100%; width: 7.5rem; height: 9.7rem; padding-top: 3.6rem; }

body:after { position: relative; }

* { margin: 0; padding: 0; }

.shanDeng { width: 100%; background-size: 100%; background-repeat: no-repeat;  margin-bottom: .15rem;}

#btn .cjBtn, .shanDeng .active, .shanDeng td { width: 1.74rem; height: 1.48rem; background-repeat: no-repeat; }

#btn.cjBtn { background-image: url(../img/cjBtn.png); background-size: 100% 100%; }

#btn.cjBtnDom { background-image: url(../img/buttonDown.png); }

#luck .active { background-image: url(../img/active.png); }

.shanDeng td { text-align: center; background-image: url(../img/proBj.png); background-size: 100% 100%; }

.shanDeng table { margin: 0 auto; }

.rule { margin: 0 auto; background-color: #E84A54; width: 4.3rem; height: 2.3rem;  padding: 0 .4rem;}

.rule p { font-size: 26px; color: #fff;  line-height: .38rem;}

.rule p:first-child { text-align: center; font-size: 32px;  line-height: .6rem;}

.play { position: absolute; top: 4%; width: 100%;  height: .42rem; line-height: .42rem;background-color: #FFEAB2; }

.play .div { height: 100%;  margin-left: .7rem;border-left: 2px solid #E84A54; }

.play span { background: url("../img/icon-laba.png") no-repeat; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%);  height: .26rem;

 width: .3rem; margin: 0 .2rem;}

5、书写并添加js代码。

<script src="js/common.js"></script>

<script src="js/jquery.min.js"></script>

6、在head标签中加入meta声明

<meta name="apple-mobile-web-app-capable" content="yes">

7、代码整体结构。

8、查看效果。