jQuery手机端转盘抽奖插件是一款用js定时器来控制角度变化,先来看看效果:
一部分关键的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<script src="jquery.min.js"></script>
<script src="rotaryDraw.js"></script>
<title>jQuery手机端转盘抽奖插件</title>
<style>
*{padding:0;margin:0;}
body{
background:#f03200;
}
.box{
position:relative;
max-width:750px;
margin:0 auto;
}
.box .img01{
width:100%;
}
.box .drawBtn{
position:absolute;
width:10rem;
height:auto;
left:50%;
margin-left:-5rem;
}
.box1{
position:relative;
max-width:750px;
margin:0 auto;
}
.box1 .img01{
width:100%;
}
.box1 .drawBtn2{
position:absolute;
width:10rem;
height:auto;
left:50%;
margin-left:-5rem;
}
</style>
</head>
<body>
<div class="box">
<img src="images/img_01.png" class="img01" alt="">
<img src="images/img_03.png" class="drawBtn">
</div>
<div class="box1">
<img src="images/img_02.png" class="img01" alt="">
<img src="images/img_03.png" class="drawBtn2">
</div>
<script>
$(".box .img01").load(function() {
var obj = $(".drawBtn");
var hei = $(this).height();
var hei2 = obj.height();
obj.css("top",(hei - hei2)/2);
});
$(".box1 .img01").load(function() {
var obj = $(".drawBtn2");
var hei = $(this).height();
var hei2 = obj.height();
obj.css("top",(hei - hei2)/2);
});
</script>
<script>
//share份额[数字没有默认],
//speed速度[单位s,最小0.1s],
//velocityCurve速度曲线[linear匀速,ease慢快慢,ease-in慢慢开始,ease-out慢慢结束,ease-in-out慢快慢等,用的是css3的速度曲线],可以不写,ease默认值;
//callback回调函数
//weeks几周[默认2周,可以不写]
//几份和回调函数这两个参数是必填
function callbackA(ind)
{
alert("第一个回调"+ind);
};
function callbackB(ind)
{
alert("第二个回调"+ind);
};
var newdraw =new turntableDraw('.drawBtn',{
share:8,
speed:"3s",
velocityCurve:"ease",
weeks:6,
callback:function(num)
{
callbackA(num);
},
});
var newdraw2 =new turntableDraw('.drawBtn2',{
share:12,
speed:"3s",
velocityCurve:"ease",
weeks:6,
callback:function(num)
{
callbackB(num);
},
});
$(".drawBtn").click(function(event) {
//ajax
newdraw.goto(parseInt(Math.random()*8)+1);
});
$(".drawBtn2").click(function(event) {
//ajax
newdraw2.goto(parseInt(Math.random()*12)+1);
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
全部代码:jQuery手机端转盘抽奖插件