js实现转盘抽奖
大转盘抽奖，主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现。
通常，抽奖的过程需要渐进的效果，所以直接通过旋转属性写比较繁琐。
这里推荐一款插件：http://www.jqueryrotate.com/
使用jqueryRotate插件来实现旋转，可以设置持续时间和曲线，上手快，兼容强。
方法：
rotate(angle);
rotate(parameters);
getRotateAngle();
stopRotate();
1、rotate(0deg)直接传一个角度。
2、rotate(parameters)，可选值如下：
参数名
类型
说明
angle
Number
旋转到指定的角度，不带动画，默认是0
animateTo
Number
旋转到指定的角度，使用动画
bind
Object
可以传入一个对象，作为事件绑定到元素上。
center
Array
用来设定旋转的中心，传入的数组是[X,Y]格式的，可以使用数值[100,100]或者百分比[“50%”,“50%”]，默认是以元素的中心点旋转
duration
Number
指定动画的持续时间，默认是1000毫秒
step
Function
传入一个回调函数在动画的每一步都会调用一下
easing
Function
让动画看起来更自然，感觉用不到，而且本人对图形学没啥研究，感兴趣的官网有详细描述，就不再深究了….
callback
Function
当动画完成时的回调函数。
3、getRotateAngle() 获取当前的角度。
4、stopRatate() 停止旋转
关于jqueryRotate的使用可以多查文档，以下为用jqueryRotate.js实现的简易大转盘，需要引入jquery.js和jqueryRotate.js。
<head>
<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait">
<title>大转盘</title>
</head>
<style>
.box {
margin: 6vh auto;
width: 80vw;
height: 80vw;
position: relative;
border-radius: 100%;
display: flex;
flex-flow: row wrap;
overflow: hidden;
}
.draw\_item {
width: 40vw;
height: 40vw;
text-align: center;
line-height: 40vw;
font-size: 3vw;
color: #fff;
}
.needle {
position: absolute;
top: 36vw;
left: 25vw;
width: 30vw;
height: 6vw;
font-size: 6vw;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 6vw;
}
button{
width: 20vw;
height: 8vw;
margin: auto;
display: block;
}
</style>
<body>
<div class="box">
<div class="draw\_item" style="background: red;">谢谢参与</div>
<div class="draw\_item" style="background: orange;">热门电影票</div>
<div class="draw\_item" style="background: green;">品牌优惠券</div>
<div class="draw\_item" style="background: blue;">限量版公仔</div>
<div class="needle">----></div>
</div>
<button id="btn">开启转盘</button>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script>
//是否可以抽奖
var bRotate = true;
var rotateFn = function(awards, angles, txt) {
$('.needle').stopRotate();
$('.needle').rotate({
angle: 0,
animateTo: angles + 2520,
duration: 7000,
callback: function() {
//抽奖结果
alert(txt);
}
})
};
$('#btn').click(function() {
if(!bRotate){
alert("没有抽奖机会了");
return;
}
var item = 0;
bRotate = !bRotate;
switch(item) {
case 0:
rotateFn(0, 225, '谢谢参与');
break;
case 1:
rotateFn(1, 315, '热门电影票');
break;
case 2:
rotateFn(2, 135, '品牌优惠券');
break;
case 3:
rotateFn(3, 45, '限量版公仔');
break;
}
});
</script>
</body>效果如下：
手机扫一扫
移动阅读更方便
你可能感兴趣的文章