大转盘抽奖，主要通过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实现转盘抽奖的更多相关文章

  1. js地区转盘抽奖插件

    <script type="text/javascript"> var colors = ["#B8D430", "#3AB745&quo ...

  2. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  3. 原生js轮盘抽奖实例分析（幸运大转盘抽奖）

    效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...

  4. 简单JS旋转实现转盘抽奖效果

    闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...

  5. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  6. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  7. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  8. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  9. 纯CSS3大转盘抽奖（响应式、可配置）

    源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...

随机推荐

  1. 深度分析ReentrantLock源码及AQS源码，从入门到入坟，建议先收藏！

    一.ReentrantLock与AQS简介 在Java5.0之前,在协调对共享对象的访问时可以使用的机制只有synchronized和volatile.Java5.0增加了一种新的机制:Reentra ...

  2. 下载器Folx扩展程序支持哪些浏览器

    Folx使用多线程的下载方式大大提升了下载的速度,可以完全替代浏览器自带的下载工具,使下载文件的管理更加简单高效.但是,必须给浏览器安装Folx扩展程序,才能使用Folx下载页面链接. Folx在偏好 ...

  3. JavaSE 学习笔记07丨IO流

    Chapter 13. IO流 13.1 File类 java.io.File类是文件(file)和目录(文件夹)(directory)路径名(path)的抽象表示,主要用于文件和目录的创建.查找和删 ...

  4. C语言讲义——函数递归

    函数直接或间接调用自身 每次调用必须获得一些进展,进一步靠近目标 达到目标就不再调用自身 阅读递归函数不要纠缠于执行过程,而是相信递归函数会顺利完成任务 例:阶乘 0! =1(0 的阶乘定为1) 1! ...

  5. transform的2D和3D变换

    transform取值 none:默认值,即是无转换 matrix(,,,,,): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f] ...

  6. SkyWalking —— 分布式应用监控与链路追踪

    SkyWalking 是一个应用性能监控系统,特别为微服务.云原生和基于容器(Docker, Kubernetes, Mesos)体系结构而设计.除了应用指标监控以外,它还能对分布式调用链路进行追踪. ...

  7. 自动化运维工具之Puppet常用资源（二）

    前文我们了解了部分puppet的资源的使用,以及资源和资源的依赖关系的定义,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14071459.html:今天我们继 ...

  8. GoLang 自学系列（二）—— defer

    defer 关键字 首先来看官网的定义: A "defer" statement invokes a function whose execution is deferred to ...

  9. 渗透入门rop

    原文链接:https://blog.csdn.net/guiguzi1110/article/details/77663430?locationNum=1&fps=1 基本ROP 随着NX保护 ...

  10. Django----初始化项目结构

    1.初始化项目结构图 │ .gitignore # 提交git仓库时,不提交的文件必须要在这里进行标注 │ README.en.md # 英文(项目介绍) │ README.md # 中文项目简介 │ ...