<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery手机九宫格抽奖活动页面代码</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/common_mobile.css?version=1.0.0">
<link rel="stylesheet" href="css/index.css?version=1.0.0">
<!-- 移动端适配 -->
<script>
var html = document.querySelector('html');
changeRem();
window.addEventListener('resize', changeRem);
function changeRem() {
var width = html.getBoundingClientRect().width;
html.style.fontSize = width / 10 + 'px';
}
</script>
<style>
.awards{top: 9.5rem;
padding: 0.3rem;
margin-left: -4.6rem;
width: 9.2rem;
background-color: #fd851f;
box-shadow: 0 0.26666667rem 0.26666667rem rgba(248, 85, 40, 0.5) inset;
border-radius: 0.13333333rem;
box-sizing: border-box;}
.awards p{font-size:0.4rem; color:#340700; line-height:0.8rem;}
#wrap .title{width:100%; font-size:0.9rem; color:#fff; text-align:center; text-shadow:2px 2px 3px #fd9f04; position:absolute; left:0rem; top:2.5rem;}
</style>
</head>
<body>
<div id="wrap">
<p class="time">3.10-3.25</p>
<div class="title">随手狂欢 全年最赚</div>
<!--星星-->
<div class="stars-box">
<span class="stars"></span>
<span class="stars"></span>
<span class="stars"></span>
<span class="stars"></span>
<span class="stars"></span>
<span class="stars"></span>
<span class="stars"></span>
</div>
<!--主体-->
<div class="main">
<p class="rule"></p>
<a href="../my.html" id="myWin">
<p class="my"></p>
</a>
<!--游戏区域-->
<div class="box">
<span class="coin"></span>
<h2>您今日还有 <span id="change"> 3 </span> 次抽奖机会</h2>
<ul class="light clearfix">
<li class="fl">
<p></p>
<p class="blin"></p>
<p></p>
<p class="blin"></p>
</li>
<li class="fr">
<p class="blin"></p>
<p></p>
<p class="blin"></p>
<p></p>
</li>
</ul>
<!--九宫格-->
<ul class="play clearfix">
<li class="prize select">
<div>
<p>一等奖</p>
</div>
</li>
<li class="prize">
<div>
<p>二等奖</p>
</div>
</li>
<li class="prize">
<div>
<p>三等奖</p>
</div>
</li>
<li>
<div>
<p>谢谢参与</p>
</div>
</li>
<!--开始按钮-->
<li id="btn"></li>
<!--开始按钮-->
<li class="prize">
<div>
<p>一等奖</p>
</div>
</li>
<li class="prize">
<div>
<p>88一等奖</p>
</div>
</li>
<li>
<div>
<p>一等奖</p>
</div>
</li>
<li class="prize">
<div>
<p>一等奖</p>
</div>
</li>
</ul>
</div>
<!--奖品展示-->
<div class="awards">
<p>一等奖：iPhone XR 一台</p>
<p>一等奖：iPhone XR 一台</p>
<p>一等奖：iPhone XR 一台</p>
<p>一等奖：iPhone XR 一台</p>
<!--<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="image/drag1.png">
</li>
<li class="swiper-slide">
<img src="image/drag2.png">
</li>
<li class="swiper-slide">
<img src="image/drag3.png">
</li>
<li class="swiper-slide">
<img src="image/drag4.png">
</li>
<li class="swiper-slide">
<img src="image/drag5.png">
</li>
</ul>
</div>-->
</div>
</div>
<!--游戏规则弹窗-->
<div id="mask-rule">
<div class="box-rule">
<span class="star"></span>
<h2>活动规则说明</h2>
<span id="close-rule"></span>
<div class="con">
<div class="text">
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
</div>
</div>
</div>
</div>
<!--中奖提示-->
<div id="mask">
<div class="blin"></div>
<div class="caidai"></div>
<div class="winning">
<div class="red-head"></div>
<div class="red-body"></div>
<div id="card">
<a href="" target="_self" class="win"></a>
</div>
<a href="" target="_self" class="btn"></a>
<span id="close"></span>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/h5_game_common.js?version=1.0.0"></script>
<script src="js/index.js?version=1.0.0"></script>
</body>
</html>
jQuery手机九宫格抽奖活动页面代码.zip （32个子文件） 
image 
bottom.png 11KB dark.png 673B coin.png 2KB redPack normal.png 727B button.png 2KB prize2.png 14KB drag_box.png 3KB my.png 880B dianzhui.png 12KB drag2.png 2KB select.png 708B drag1.png 2KB choujiang.png 3KB drag5.png 2KB rule.png 872B bg.png 16KB close.png 1010B top.png 9KB start.png 4KB star1.png 2KB drag3.png 3KB gold.png 51KB drag4.png 3KB light.png 699B js 
swiper.jquery.min.js 85KB h5_game_common.js 1KB index.js 3KB jquery.min.js 91KB css common_mobile.css 8KB index.css 6KB swiper.min.css 17KB
index.html 8KB资源评论
