<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>jQuery手机九宫格幸运抽奖代码</title>
<style type="text/css">
.qimo8{ overflow:hidden;}
.qimo8 .qimo {/*width:99999999px;*/width:8000%;}
.qimo8 .qimo div{ float:left;}
.qimo8 .qimo ul{float:left;overflow:hidden; zoom:1; }
.qimo8 .qimo ul li{float:left; list-style:none; font-size: 24px;margin: 0 1rem;}
</style>
<link rel="stylesheet" type="text/css" href="css/styleCJ.css"/>
<script src="js/common.js"></script>
</head>
<body><script src="/demos/googlegg.js"></script>
<!-- 代码 开始 -->
<div class="shanDeng" id="deng">
<div id="luck"><!-- 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><!-- luckEnd -->
</div>
<div class="rule">
<p>抽奖活动规则</p>
<p>1、单次加油满200元,可抽奖一次;</p>
<p>2、各种奖券使用规则详见该奖券的使用说明;</p>
<p>3、奖券请在有效期内使用或者分享给其他朋友,过期无效</p>
</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>
<script src="js/jquery.min.js"></script>
<script>
var luck={
index:0, //当前转动到哪个位置，起点位置
count:0, //总共有多少个位置
timer:0, //setTimeout的ID，用clearTimeout清除
speed:20, //初始转动速度
times:0, //转动次数
cycle:50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize:-1, //中奖位置
init:function(id){
if ($("#"+id).find(".luck-unit").length>0) {
$luck = $("#"+id);
$units = $luck.find(".luck-unit");
this.obj = $luck;
this.count = $units.length;
$luck.find(".luck-unit-"+this.index).addClass("active");
};
},
roll:function(){
var index = this.index;
var count = this.count;
var luck = this.obj;
$(luck).find(".luck-unit-"+index).removeClass("active");
index += 1;
if (index>count-1) {
index = 0;
};
$(luck).find(".luck-unit-"+index).addClass("active");
this.index=index;
return false;
},
stop:function(index){
this.prize=index;
return false;
}
};
function roll(){
luck.times += 1;
luck.roll();
if (luck.times > luck.cycle+10 && luck.prize==luck.index) {
clearTimeout(luck.timer);
luck.prize=-1;
luck.times=0;
click=false;
}else{
if (luck.times<luck.cycle) {
luck.speed -= 10;
}else if(luck.times==luck.cycle) {
var index = Math.random()*(luck.count)|0;
if(index>5){
index = 7;
}else {
index = 5;
}
luck.prize = index;//最终中奖位置
}else{
if (luck.times > luck.cycle+10 && ((luck.prize==0 && luck.index==7) || luck.prize==luck.index+1)) {
luck.speed += 110;
}else{
luck.speed += 20;
}
}
if (luck.speed<40) {
luck.speed=40;
};
luck.timer = setTimeout(roll,luck.speed);
}
return false;
}
var click=false;
window.onload=function(){
luck.init('luck');
$("#btn").click(function(){
/*//按下弹起效果
$("#btn").addClass("cjBtnDom");
setTimeout(function(){
$("#btn").removeClass("cjBtnDom");
},200);*/
if(click) {
return false;
}
else{
luck.speed=100;
roll();
click=true;
return false;
}
});
};
//播报
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=document.getElementById("demo1").innerHTML;
function Marquee(){
if(demo.scrollLeft-demo2.offsetWidth>=0){
demo.scrollLeft-=demo1.offsetWidth;
}
else{
demo.scrollLeft++;
}
}
setInterval(Marquee,10);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery手机九宫格幸运抽奖代码.zip （15个子文件） 
js 
common.js 1KB jquery.min.js 91KB img 
bg-img.png 23KB 05.png 5KB 02.png 4KB proBj.png 1KB 04.png 4KB 01.png 6KB 03.png 4KB active.png 2KB icon-laba.png 1KB cjBtn.png 7KB css styleCJ.css 2KB common.css 2KB
index.html 5KB资源评论
