jQuery自适应页面手机端抽奖代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery自适应页面手机端抽奖代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>jQuery自适应页面手机端抽奖代码</title>
<link rel="stylesheet" type="text/css" href="css/public/reset.css">
<link rel="stylesheet" type="text/css" href="css/public/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/public/function.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/model/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/model/jquery.SuperSlide.2.1.1.source.js"></script>
<script type="text/javascript" src="js/model/html5.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body class="g-body-in">
<div class="g-wrap">
	<section class="h15"></section>
	<section class="main-sec pt5 main-wheel">
		<div class="big-border">
			<div class="small-border g9">

				<div class="shan">
					<span>1元现金</span>
					<img src="images/monery.png" width="30%">
				</div>

				<div class="shan">
					<span>2元现金</span>
					<img src="images/monery.png" width="30%">
				</div>

				<div class="shan">
					<span>3元现金</span>
					<img src="images/monery.png" width="30%">
				</div>

				<div class="shan">
					<span>4元现金</span>
					<img src="images/monery.png" width="30%">
				</div>
				
				<div class="shan">
					<span>5元现金</span>
					<img src="images/monery.png" width="30%">
				</div>

				<div class="shan">
					<span>6元现金</span>
					<img src="images/monery.png" width="30%">
				</div>

				<div class="shan">
					<span>7元现金</span>
					<img src="images/monery.png" width="30%">
				</div>

				<div class="shan">
					<span>8元现金</span>
					<img src="images/monery.png" width="30%">
				</div>

				<div class="shan">
					<span>9元现金</span>
					<img src="images/monery.png" width="30%">
				</div>


				<img src="images/middle.png" width="50%" class="middle">
			</div>
		</div>
	</section>

	<section class="main-sec">
		<div class="g-num">您还有<em>2</em>次抽奖机会</div>
	</section>

	<section class="main-sec loptop">
		<div class="m-title"><h3>有谁在抢</h3></div>
		<dl class="peolist">
			<dd>
				<img src="images/facepic.jpg" width="20%">
				<div class="right">
					<span><h2>雨中漫步</h2><em>7月1日 21:25</em></span>
					<p>跪谢老板打赏跪谢老板</p>
				</div>
			</dd>

			<dd>
				<img src="images/facepic.jpg" width="20%">
				<div class="right">
					<span><h2>雨中漫步</h2><em>7月1日 21:25</em></span>
					<p>跪谢老板打赏</p>
				</div>
			</dd>

			<dd>
				<img src="images/facepic.jpg" width="20%">
				<div class="right">
					<span><h2>雨中漫步</h2><em>7月1日 21:25</em></span>
					<p>跪谢老板打赏</p>
				</div>
			</dd>
		</dl>

	</section>

	<script type="text/javascript">
		jQuery(".loptop").slide( {mainCell:"dl",autoPage:true,effect:'topLoop',autoPlay:true,scroll:3,vis:3,easing:'swing',delayTime:500, interTime:3000, pnLoop:true});

	</script>

	<section class="main-sec">
		<div class="m-title"><h3>活动说明</h3></div>
		<div class="einfo">
			<p>活动时间：7月1日-7月30日</p>
			<p>每日签到可获1次抽奖机会</p>
			<p>每日邀请好友参与可获1次抽奖机会</p>
		</div>
	</section>

	<section class="main-sec">
		<footer>程序员设计师联盟淘宝店提供技术支持！</footer>
	</section>
</div>

<div class="dialog gz">
	<div class="d-main">
		<p>请进入"镇江微生活"公众号立即参与</p>
		<div class="btn-w">
			<a class="btn" href="#">进入</a>
			<a class="btn false" href="javascript:void(0);">取消</a>
		</div>
	</div>
</div>

<div class="dialog info">
	<div class="d-main">
		<p>次数用光,金额不足 之类的 信息提示表单</p>
	</div>
</div>


<div class="dialog theForm">
	<div class="d-main">
		<p>恭喜你,抽奖成功,获得了8元现金,请注意查收</p>
		<div class="btn-w">
			<a class="btn btn-lang close" href="javascript:;">确定</a>
		</div>
	</div>
</div>


<div class="dialog again">
	<div class="d-main">
		<p>再来一次</p>
		<div class="btn-w">
			<a class="btn close" href="javascript:;">再来一次</a>
			<a class="btn false" href="javascript:;">取消</a>
		</div>
	</div>
</div>

<script type="text/javascript">
var valueJson = {
	'wheelBody' : $('.big-border'), //转盘主体
	'wheelSmall' : $('.small-border'), //转盘内部
	'starsNum' : 16, //转盘边缘小黄点个数

	'starsPostion' : [[50, 0.5], [70, 6], [84.5, 18], [92.5, 32], [95.5, 50], [91, 68], [81.5, 81.5], [68, 91], [50, 95.5], [32, 92.5], [16, 83], [6, 70], [0.5, 50], [3.5, 32], [14, 15], [27, 5.5]], //小圆点坐标
	'actionRan' : 7200, //转盘转动弧度
	'theOnce' : 0, //初始化转盘第一个
	'startBtn' : $('.middle'), //开始按钮

	//需要后台传值的参数
	'clickAjaxUrl' : 'www.baidu.com', //点击抽奖获取信息的交互的ajax
	'is_gz' : 1, //是否开启关注 1开 2 关
	'is_follow' : 1 //是否关注

};
indexApp.init(valueJson).wheelStart(); //应用开始
</script>
</body>
</html>

JS代码(app.js):

var indexApp ={
	//入口方法init:function (valueJson){
	this.valueJson = valueJson;
	//获取前台页面传入的参数this.wheelInit();
	//一些样式的初始化 如圆形的高度设置等this.resize();
	//onresize 事件 重置样式this.cancel($('.false'));
	//注册取消按钮的点击事件this.cancel($('.close'));
	//注册再来一次按钮的点击事件return this;
	//返回对象本身,使其可以链式调用}
,//转盘初始化wheelInit:function (){
	var t = this;
	t.valueJson['wheelBody'].css('height',t.valueJson['wheelBody'].css('width'));
	t.valueJson['wheelSmall'].css('height',t.valueJson['wheelSmall'].css('width'));
	t.showStars();
	//某几个小圆点高亮}
,//窗口改变时的重新设置样式resize:function (){
	var t = this;
	$(window).resize(function (){
	t.wheelInit();
	//窗口发生变化的时候重置样式}
);
}
,//计算并且排列小圆点showStars:function (){
	var t = this;
	for(var i=0;
	i < t.valueJson['starsNum'];
	i++){
	var oStar = document.createElement('div');
	if(i%2 == 0){
	//奇数的圆点增加高亮的效果(外阴影)oStar.style.boxShadow = '0 0 5px #fff';
}
oStar.className = 'stars';
	oStar.style.left = t.valueJson['starsPostion'][i][0] + '%';
	oStar.style.top = t.valueJson['starsPostion'][i][1] + '%';
	t.valueJson['wheelBody'].append(oStar);
}
}
,//取消按钮事件绑定cancel:function (obj){
	obj.click(function (){
	$(this).parents('.dialog').css('display','none');
}
);
}
,//转盘开始的初始化函数 以及点击事件 通过链式调用加载 而非init()初始化加载,这样做,当未开始或者已结束页面不需要转动的时候,不链式调用此方法就行wheelStart:function (){
	var t = this;
	t.nowRan = 0;
	//当前弧度t.once = true;
	//是否第一次t.onStart = true;
	//是否开始了转动//点击事件t.valueJson['startBtn'].click(function (){
	if(t.onStart == true){
	//只有 为 true 的 时候 才允许转动t.onStart = false;
	//如果开启了关注 并且 当前 用户 没有关注if(t.valueJson['is_gz'] == 1 && t.valueJson['is_follow'] == 2){
	t.dialog($('.gz'));
	//弹出关注提示框}
else{
	//ajax 事件 获取//得到的参数详细见交互文档/*$.ajax({
	'type':'POST','url':t.valueJson['clickAjaxUrl'],success:function (data){
	*/
var data ={
	'status':1,'actionStatus':1,'ran':40,'onceran':40,'num':1}
if(data['status'] == 1){
	//表示成功t.showWheel(data);
	//执行转动效果}
else if(data['status'] == 2){
	//金额不足 或者次数不足t.dialog($('.info'),data);
	//没有按钮的提示信息}
else{
	//出现了异常错误t.dialog($('.again'),data);
	//执行带按钮的提示框}
/*}
}
);
	*/
}
}
}
);
}
,//转盘转动具体算法showWheel:function (data){
	var t = this;
	//需要转动的值 等与当前值 + 默认转动7200度 + 后台计算传过来的度数var ra = t.nowRan + t.valueJson['actionRan'] + data['ran'];
	//第一次的话 弧度要加上每一块弧度的一半if(t.once){
	t.once = false;
	ra = ra + (data['onceran'] / 2)}
//注意指针 和 转盘 反方向转动 来达到 指针 不动的效果t.valueJson['wheelBody'].css('webkitTransform','rotate('+ ra +'deg)');
	t.valueJson['startBtn'].css('webkitTransform','rotate('+ (-ra) +'deg)');
	//重新获取当前的度数t.nowRan = ra;
	//转盘转动需要4S 这里 4.5S 后 执行 各种弹出提示信息框的事件setTimeout(function (){
	t.showDialog(data);
	t.onStart = true;
}
,4500);
}
,//根据各种不同的参数 显示弹出层的提示框showDialog:function (data){
	var t = this;
	if(data['actionStatus'] == 1){
	//值为1 表示 抽取到了现金红包t.deduct(data);
	//扣除次数;
	t.dialog($('.theForm'),data);
	//获得奖品的 提示信息框}
else if(data['actionStatus'] == 2){
	//值为2 表示 再来一次 再来一次不扣除次数t.dialog($('.again'),data);
	//再来一次}
else if(data['actionStatus'] == 3){
	//值为3 表示 谢谢参与t.deduct(data);
	//扣除次数;
	t.dialog($('.again'),data);
	//谢谢参与}
}
,//扣除次数的相关操作 次数的 参数 也是ajax 后台传递过来deduct:function (data){
	$('.g-num').find('em').html(data['num']);
}
,//弹出层dialog:function (obj,data,bl){
	if(data && !bl){
	//关注 再来一次 谢谢参与 系统异常 都是执行此处obj.find('d-main').children('p').html(data['mess']);
}
//打开弹出层obj.css('display','block');
}
}

JS代码(public.js):

function reset_pic(obj,size,bl){
	if(size = 'auto'){
	var dW = obj.parentNode.offsetWidth;
	var dH = obj.parentNode.offsetHeight}
else{
	size = size.split(',');
	var dW = size[0];
	var dH = size[1];
}
var img = new Image();
	img.src = obj.src;
	if(img.width/img.height >= dW/dH){
	if(img.width > dW){
	obj.width = dW;
	obj.height = img.height*dW/img.width;
}
else{
	obj.width = img.width;
	obj.height = img.height > dH ? img.height*img.width/dW:img.height;
}
}
else{
	if(img.height > dH){
	obj.height = dH;
	obj.width = img.width*dH/img.height;
}
else{
	obj.height = img.height;
	obj.width = img.width > dW ? img.height*img.width/dH:img.width;
}
}
if(obj.currentStyle){
	//return obj.currentStyle[name];
	obj.style.marginTop = (dH-parseInt(obj.currentStyle['height']))/2+'px';
}
else{
	obj.style.marginTop = (dH-obj.height)/2+'px';
}
if(bl){
	obj.style.marginLeft = 0;
}
else{
	if(obj.currentStyle){
	//return obj.currentStyle[name];
	obj.style.marginLeft = (dW-parseInt(obj.currentStyle['width']))/2+'px';
}
else{
	obj.style.marginLeft = (dW-obj.width)/2+'px';
}
}
}

CSS代码(style.css):

.g-wrap{width:100%;overflow:hidden;background:#c72222;min-height:100%;padding-bottom:20px;}
.logo-sec{width:100%;overflow:hidden;}
.logo-sec p{width:100%;height:30px;line-height:30px;text-align:center;margin-top:-40px;color:#fff;}
.logo-sec p em{color:#ffb820;margin:0 2px;}
.main-sec{width:92%;overflow:hidden;padding:0 4%;}
.h15{height:15px;}
.pt5{padding-top:5px;}
.m-title{width:100%;height:15px;margin-top:10px;border-bottom:1px solid #ffb820;margin-bottom:30px;}
.m-title h3{width:35%;height:30px;line-height:30px;text-align:center;color:#ffb820;background:#c72222;margin:0 auto;font-size:1.3em;font-weight:bold;}
.peolist{width:100%;overflow:hidden;background:#b21b1b;}
.peolist dd{width:92%;overflow:hidden;padding:14px 0;border-bottom:1px dashed #ffb820;margin:0 auto;}
.peolist dd:nth-of-type(3n){border-bottom:none;}
.peolist dd img{float:left;}
.peolist dd div.right{width:75%;float:right;}
.peolist dd div.right span{width:100%;height:30px;color:#ffc5c5;display:block;}
.peolist dd div.right span h2{font-size:1.2em;float:left;width:60%;}
.peolist dd div.right span em{width:40%;float:right;font-size:0.9em;line-height:22px;}
.peolist dd div.right p{width:100%;line-height:16px;font-size:1.1em;color:#ffb820;}
.einfo{width:92%;overflow:hidden;padding:14px 4%;background:#b21b1b;}
.einfo p{line-height:24px;color:#ffb820;}
.morebtn{width:100%;height:30px;line-height:30px;text-align:center;background:#b21b1b;color:#ffb820;margin-top:10px;}
/*转盘*/
.big-border{width:90%;background:#e44025;border-radius:50%;box-shadow:0 -2px 2px #f2502f;padding:5%;position:relative;-webkit-transition:all 4s cubic-bezier(1,0.00001,0.00001,1);transition:all 4s cubic-bezier(1,0.00001,0.00001,1);}
.main-wheel{background:url(../images/shadow.png) no-repeat center bottom;background-size:100%;padding-bottom:15px;}
.small-border{width:100%;border-radius:50%;background-size:100%;position:relative;}
.middle{position:absolute;left:25%;top:25%;z-index:100;-webkit-transition:all 4s cubic-bezier(1,0.00001,0.00001,1);transition:all 4s cubic-bezier(1,0.00001,0.00001,1);}
.stars{width:4%;height:4%;border-radius:50%;background:#ffb820;position:absolute;}
footer{width:100%;line-height:24px;color:#ffb820;text-align:center;margin-top:10px;}
.shan{position:absolute;}
/* g3 */
.g3{background:url(../images/g3.png) no-repeat center;}
.g3 .shan{width:66%;height:50%;text-align:center;color:#f3352f;font-size:1.3em;}
.g3 .shan span{width:100%;height:30px;line-height:30px;display:block;}
.g3 .shan img{margin-top:5px;}
.g3 .shan:nth-of-type(1){-webkit-transform:rotate(150deg);left:30%;bottom:6%;}
.g3 .shan:nth-of-type(2){-webkit-transform:rotate(-90deg);left:-5%;top:24%;}
.g3 .shan:nth-of-type(3){-webkit-transform:rotate(30deg);left:27%;top:6%;}
/*g4 */
.g4{background:url(../images/g4.png) no-repeat center;}
.g4 .shan{width:50%;height:50%;text-align:center;color:#f3352f;font-size:1.3em;}
.g4 .shan span{width:100%;height:30px;line-height:30px;display:block;}
.g4 .shan img{margin-top:5px;}
.g4 .shan:nth-of-type(1){-webkit-transform:rotate(135deg);left:40%;;top:40%;}
.g4 .shan:nth-of-type(2){-webkit-transform:rotate(-135deg);left:10%;top:40%;}
.g4 .shan:nth-of-type(3){-webkit-transform:rotate(-45deg);left:10%;top:10%;}
.g4 .shan:nth-of-type(4){-webkit-transform:rotate(45deg);left:40%;top:10%;}
/*g5 */
.g5{background:url(../images/g5.png) no-repeat center;}
.g5 .shan{width:40%;height:50%;text-align:center;color:#f3352f;font-size:1.2em;}
.g5 .shan span{width:100%;height:30px;line-height:30px;display:block;}
.g5 .shan img{margin-top:5px;}
.g5 .shan:nth-of-type(1){-webkit-transform:rotate(130deg);left:48%;top:37%;}
.g5 .shan:nth-of-type(2){-webkit-transform:rotate(195deg);left:25%;;top:45%;}
.g5 .shan:nth-of-type(3){-webkit-transform:rotate(270deg);left:10%;top:25%;}
.g5 .shan:nth-of-type(4){-webkit-transform:rotate(-20deg);left:25%;top:4%;}
.g5 .shan:nth-of-type(5){-webkit-transform:rotate(55deg);left:47%;top:11%;}
/*g6*/
.g6{background:url(../images/g6.png) no-repeat center;}
.g6 .shan{width:40%;height:50%;text-align:center;color:#f3352f;font-size:1.2em;}
.g6 .shan span{width:100%;height:30px;line-height:30px;display:block;}
.g6 .shan img{margin-top:5px;}
.g6 .shan:nth-of-type(1){-webkit-transform:rotate(120deg);left:48%;top:37%;}
.g6 .shan:nth-of-type(2){-webkit-transform:rotate(180deg);left:30%;;top:45%;}
.g6 .shan:nth-of-type(3){-webkit-transform:rotate(-120deg);left:11%;top:35%;}
.g6 .shan:nth-of-type(4){-webkit-transform:rotate(-60deg);left:12%;top:15%;}
.g6 .shan:nth-of-type(5){-webkit-transform:rotate(0deg);left:30%;top:3%;}
.g6 .shan:nth-of-type(6){-webkit-transform:rotate(60deg);left:48%;top:15%;}
/*g7*/
.g7{background:url(../images/g7.png) no-repeat center;}
.g7 .shan{width:33.33%;height:50%;text-align:center;color:#f3352f;font-size:1.1em;}
.g7 .shan span{width:100%;height:30px;line-height:30px;display:block;}
.g7 .shan img{margin-top:5px;}
.g7 .shan:nth-of-type(1){-webkit-transform:rotate(120deg);left:55%;top:34%;}
.g7 .shan:nth-of-type(2){-webkit-transform:rotate(170deg);left:40%;;top:47%;}
.g7 .shan:nth-of-type(3){-webkit-transform:rotate(220deg);left:21%;top:43%;}
.g7 .shan:nth-of-type(4){-webkit-transform:rotate(270deg);left:12%;top:25%;}
.g7 .shan:nth-of-type(5){-webkit-transform:rotate(320deg);left:20%;top:8%;}
.g7 .shan:nth-of-type(6){-webkit-transform:rotate(10deg);left:40%;top:5%;}
.g7 .shan:nth-of-type(7){-webkit-transform:rotate(65deg);left:53%;top:17%;}
/*g8*/
.g8{background:url(../images/g8.png) no-repeat center;}
.g8 .shan{width:33.33%;height:50%;text-align:center;color:#f3352f;font-size:1.1em;}
.g8 .shan span{width:100%;height:30px;line-height:30px;display:block;}
.g8 .shan img{margin-top:5px;}
.g8 .shan:nth-of-type(1){-webkit-transform:rotate(115deg);left:53%;top:34%;}
.g8 .shan:nth-of-type(2){-webkit-transform:rotate(160deg);left:42%;;top:44%;}
.g8 .shan:nth-of-type(3){-webkit-transform:rotate(205deg);left:27%;top:45%;}
.g8 .shan:nth-of-type(4){-webkit-transform:rotate(-115deg);right:53%;top:34%;}
.g8 .shan:nth-of-type(5){-webkit-transform:rotate(-65deg);left:14%;top:18%;}
.g8 .shan:nth-of-type(6){-webkit-transform:rotate(-25deg);left:25%;top:6%;}
.g8 .shan:nth-of-type(7){-webkit-transform:rotate(25deg);right:25%;top:6%;}
.g8 .shan:nth-of-type(8){-webkit-transform:rotate(65deg);right:14%;top:18%;}
/*g9*/
.g9{background:url(../images/g9.png) no-repeat center;}
.g9 .shan{width:30%;height:50%;text-align:center;color:#f3352f;font-size:1.1em;}
.g9 .shan span{width:100%;height:30px;line-height:30px;display:block;}
.g9 .shan img{margin-top:5px;}
.g9 .shan:nth-of-type(1){-webkit-transform:rotate(110deg);left:55%;top:33%;}
.g9 .shan:nth-of-type(2){-webkit-transform:rotate(150deg);left:46%;;top:44%;}
.g9 .shan:nth-of-type(3){-webkit-transform:rotate(190deg);left:32%;top:47%;}
.g9 .shan:nth-of-type(4){-webkit-transform:rotate(230deg);left:19%;top:40%;}
.g9 .shan:nth-of-type(5){-webkit-transform:rotate(270deg);left:14%;top:26%;}
.g9 .shan:nth-of-type(6){-webkit-transform:rotate(310deg);left:18%;top:13%;}
.g9 .shan:nth-of-type(7){-webkit-transform:rotate(350deg);left:31%;top:5%;}
.g9 .shan:nth-of-type(8){-webkit-transform:rotate(30deg);left:46%;top:7%;}
.g9 .shan:nth-of-type(9){-webkit-transform:rotate(70deg);left:55%;top:18%;}
.g-num{width:80%;height:40px;background:#d82828;border-radius:20px;border:1px solid #e44025;margin:0 auto;margin-top:10px;line-height:40px;text-align:center;color:#fff;font-size:1.3em}
.g-num em{margin:0 5px;color:#ffd737;}
.dialog{width:100%;height:100%;background:rgba(0,0,0,0.7);position:fixed;top:0;z-index:1000;font-size:1.2em;display:none;}
.dialog .d-main{width:84%;overflow:hidden;padding:16px 8%;position:absolute;top:20%;background:#bc1616;}
.dialog .d-main p{width:100%;line-height:22px;color:#fff;}
.dialog .d-main .btn-w{width:100%;overflow:hidden;margin-top:20px;}
.dialog .d-main .btn-w a.btn{width:38%;height:36px;line-height:36px;color:#960b0b;background:#ffaa30;display:inline-block;text-align:center;}
.dialog .d-main .btn-w a.btn:first-child{margin-right:20%}
.dialog .d-main .btn-w a.false{background:#960b0b;color:#ffaa30;}
.dialog .d-main .btn-w a.btn-lang:first-child{width:68%;margin:0 auto;display:block;}
.info .d-main{top:35%;padding:24px 8%;}
.info .d-main p{color:#ffda0a;}

附件:下载该文件资源,减少时间成本(增值服务)