H5微信手机端挑选宝箱抽奖活动特效代码下载
1. 引入CSS
<link href="css/common.css" rel="stylesheet" type="text/css"><link href="css/index.css" rel="stylesheet" type="text/css">
2. 引入JS
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
3. HTML代码
<div class="container"> <div class="top-box"> <img src="images/top.png" alt="H5微信手机端挑选宝箱抽奖活动特效代码下载" width="100%"> </div> <div class="chest-tip"> <p>挑选一个宝箱，点击开启奖品吧</p> <p>中奖后立即出示给工作人员登记并为您兑奖哦</p> </div> <div class="chest-box"> <ul class="chest-list"> <li class="chestBtn chest1"> <img src="images/chest.png" alt="H5微信手机端挑选宝箱抽奖活动特效代码下载"> </li> <li class="chestBtn chest2" style="margin: 0 5%;"> <img src="images/chest.png" alt="H5微信手机端挑选宝箱抽奖活动特效代码下载"> </li> <li class="chestBtn chest3"> <img src="images/chest.png" alt="H5微信手机端挑选宝箱抽奖活动特效代码下载"> </li> <div class="clear"></div> </ul> <ul class="chest-list"> <li class="chestBtn chest4" style="margin: 0 5% 0 17.5%;"> <img src="images/chest.png" alt="H5微信手机端挑选宝箱抽奖活动特效代码下载"> </li> <li class="chestBtn chest5"> <img src="images/chest.png" alt="H5微信手机端挑选宝箱抽奖活动特效代码下载"> </li> <div class="clear"></div> </ul> </div> <div class="prize-overlay" id="prize-overlay"> <div class="overlay-title"> <img src="images/overlay-title.png" alt="H5微信手机端挑选宝箱抽奖活动特效代码下载"> </div> <div class="outFrame"> <div class="prize-txt"> <p class="resultTip"> <img src="images/congratulation.png" alt="H5微信手机端挑选宝箱抽奖活动特效代码下载"> </p> <br/> <p id="result" class="result"></p> <br/> <p class="resultTip">提示：不要退出，请立即出示给兑奖区的工作人员登记，并为您兑换奖品</p> </div> </div> </div> <div class="rule-box"> <div class="rule-title"> <p>奖品介绍</p> </div> <div class="prize-box"> <p>一等奖：双汇大骨肠（30g*8支*10袋）1件</p> <p>二等奖：双汇培根（260g）1支</p> <p>三等奖：双汇大骨肠（30g*8支）1袋</p> <p>四等奖：双汇大骨肠（40g）1支</p> <p style="font-weight: bold; font-size: 16px;">奖品数量有限，先到先得，送完即止</p> <p style="font-weight: bold; font-size: 16px;">如果第一、二、三等奖兑换完毕，将会以四等奖替补，敬请谅解</p> </div> <br/> <div class="rule-title"> <p>活动规则</p> </div> <div class="prize-box"> <p>1. 购满38元，凭购物小票抽奖</p> <p>2. 每张满38元的小票只能抽奖一次</p> <p>3. 抽奖后，立即将弹出的中奖结果出示给兑奖区的工作人员登记，并为您兑换奖品</p> <br/> <p>* 最终解释权归活动主办方所有</p> </div> </div> <div class="foot"> <p>技术支持：<a href="tel:18918106740">上海瑞切广告有限公司</a></p> </div> </div>
