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。
<!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>
效果如下:
js实现转盘抽奖的更多相关文章
- js地区转盘抽奖插件
<script type="text/javascript"> var colors = ["#B8D430", "#3AB745&quo ...
- 原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
- 原生js轮盘抽奖实例分析(幸运大转盘抽奖)
效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...
- 简单JS旋转实现转盘抽奖效果
闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
- jquery——九宫格大转盘抽奖
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...
- 纯CSS3大转盘抽奖(响应式、可配置)
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...
随机推荐
- ceph的pg平衡插件balancer
前言 ceph比较老的版本使用的reweight或者osd weight来调整平衡的,本篇介绍的是ceph新的自带的插件balancer的使用,官网有比较详细的操作手册可以查询 使用方法 查询插件的开 ...
- CSS属性(边框)
1.边框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...
- Linux(Centos6.8)配置Nginx环境
1.环境配置 操作系统:centos6.8 [root@host79 ~]# uname -a Linux host79.pluto 2.6.32-642.el6.x86_64 #1 SMP Tue ...
- Mac OS终端利器 iTem2 配置大全
转载链接:https://www.cnblogs.com/diyxiaoshitou/p/9017413.html 之前一直使用 Mac OS 自带的终端,用起来虽然有些不太方便,但总体来说还是可以接 ...
- 给力啊!这篇Spring Bean的依赖注入方式笔记总结真的到位,没见过写的这么细的
1. Bean的依赖注入概念 依赖注入(Dependency Injection):它是 Spring 框架核心 IOC 的具体实现.在编写程序时,通过控制反转,把对象的创建交给了 Spring,但是 ...
- 面试阿里,美团,京东都会被问到的Spring ,从基础到源码帮你全搞定
1 前言 Spring是一个轻量级开源框架,它是为了解决企业应用开发的复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框 ...
- ABBYY FineReader 15扫描和保存文档详解
通过使用ABBYY FineReader 15 OCR文字识别软件的扫描和保存文档功能,用户可使用扫描仪或数码照相机获得图像文档,然后再转换为各种数字格式文档. 在"新任务窗口"中 ...
- web自动化测试,弹出窗的操作
弹出窗有两种: 1.alert弹窗 2.页面弹出窗 什么是alert弹窗呢,点击某一个事件后,会弹出一个弹窗,如下图所示,相信大家在测试中有遇到过,怎么操作它呢 1.1弹窗出现后,使用switch_t ...
- python-交互模式
1.打开python交互式命令行: Windows+R→回车→输入python 如图 输入python进入交互模式,相当于启动了python解释器,输入一行代码就执行一行代码,可以用交互模式去验证每一 ...
- 编程C语言进阶篇——自定义数据类型:共同体
什么是"自定义数据类型"?顾名思义,就是用户可以随时在程序中自行定义新的数据类型.自定义数据类型时需要设置数据类型的名称及其成员.数据类型成员各属性的设置方法等同于变量设置时相应属 ...