大转盘抽奖,主要通过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。
<!DOCTYPE html>
<html>
<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>
</html>
效果如下:
有人住高楼,有人处深沟。 有人光万丈,有人一生绣。 时光是匆匆,回首无旧梦。 人生若几何,凡尘事非多。 深情总遗却,妄自也洒脱。