大转盘抽奖, 主要通过 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>
效果如下:
来源: http://www.bubuko.com/infodetail-3163200.html