利用jquery Rotare实现抽奖转盘
相信大家对大转盘这个抽奖活动相当熟悉了吧，现在很多商家都会通过大转盘来进行商品的促销，有点事实体大转盘，有的是在网上进行的，有好多还是在微信平台进行大转盘抽奖活动，借此来推销自己的产品。下面来看看如何通过jquery rotare来实现大转盘抽奖活动。
首先一点是需要引入jquery Rotare这个js文件，本站提供下载链接。然后就是我们分析一下转盘奖品的设置了，你需要明确知道每种奖品对应的角度是多少。下面我们来看一下rotare代码
$(el).rotate({
duration:9000, //时间
angle: 0, //初始角度
animateTo:angle,//终止角度
easing: $.easing.easeOutSine,//动画需要jery.easing.min.js
callback: function(){
//这里判断每个角度对应的奖品
}
})看完了上面这段代码，我们在来看一下整体的一个代码
<!DOCTYPE html>
<html>
<head>
<title>zhuanpan.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="js/touch.js"></script>
<style>
*{
margin:0;
padding:0;
}
.main{position: absolute;width: 100%;height: 100%;margin: 0;overflow: hidden;}
.bg {width: 100%;height:100%;top: 0;position: absolute;}
.center {position: absolute;left: 0;right: 0;margin: auto;z-index: 8;}
.none{display: none;}
</style>
<script type="text/javascript">
$(function(){
$(".rotate-con-zhen").rotate({
bind:{
touchstart:function(){
var a = runzp();
$(".rotate-con-pan").rotate({
duration:9000, //时间
angle: 0, //初始角度
animateTo:2880+a.angle, //终止角度
easing: $.easing.easeOutSine,//动画需要jery.easing.min.js
callback: function(){
if(a.angle>0&&a.angle<=45){
alert("谢谢参与");
}else if(a.angle>45&&a.angle<=90){
alert("500元代金券");
}else if(a.angle>90&&a.angle<=135){
alert("5元代金券");
}else if(a.angle>135&&a.angle<=180){
alert("10元代金券");
}else if(a.angle>180&&a.angle<=225){
alert("1元代金券");
}else if(a.angle>225&&a.angle<=270){
alert("50元代金券");
}else if(a.angle>275&&a.angle<=315){
alert("谢谢参与");
}else {
alert("300元代金券");
}
}
});
}
}
});
});
function runzp(){
var myzhuan = new Object();
var angle=Math.random()*360;
myzhuan.angle = angle;
return myzhuan;
}
</script>
</head>
<body>
<img src="images/background.png" class="bg" style="z-index:-1"/>
<img class="center rotate-con-pan" src="images/pan.png" style="width:63%;bottom:19%"/>
<img class="center rotate-con-zhen" src="images/zhen.png" style="width:20%;bottom:34%"/>
</body>
</html>在上面这个程序中我绑定的是touchstart事件，适用于移动端和触摸设备，如果你想使用click事件，则只需要将touchstart改为click即可。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-08-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读