大转盘抽奖，主要通过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. Ceph S3 基于NGINX的集群复制方案

    前言 ceph的s3数据的同步可以通过radosgw-agent进行同步,同region可以同步data和metadata,不同region只能同步metadata,这个地方可以参考下秦牧羊梳理的 c ...

  2. async await 你真的用对了吗？

    大部分同学了解Promise,也知道async await可以实现同步化写法,但实际上对一些细节没有理解到位,就容易导致实际项目中遇到问题. 开始先抛结论,下文将针对主要问题点进行论述. 1.所有as ...

  3. 公司人员组织架构图用思维导图软件MindManager怎么做

    有朋友一直不太明白组织架构图怎么做,其实组织架构图就是组织结构图.小编今天就在这里以一个公司为例,来给大家演示一番人员组织结构图怎么做. 老规矩,先说一下小编使用的软件跟电脑系统,这里用的是MindM ...

  4. 如何使用ABBYY FineReader 手动管理文档区域

    在运用OCR编辑器时,ABBYY FineReader 15(Windows系统)OCR文字识别软件会对扫描仪或数码相机导入的图像进行识别和检测.在识别和检测之前,软件会自动对PDF文档中的文本.图片 ...

  5. guitar pro系列教程（三）：Guitar Pro7乐谱页面显示模式设置

    大家好,又到了guitar pro系列教程的时间 本章节我们采用图文结合的方式为大家讲解一下guitar pro 7乐谱的页面显示设置,有兴趣的小伙伴都可以进来看看哦.首让我们先看下图: 如上图所示, ...

  6. web自动化测试难点 滚动条操作、日期框处理、上传文件

    如何把页面滑到最低部? 一般来说,做web自动化测试时,不需要单独写代码,把页面滑到可见,因为click操作,只要是元素存在并且加载出来了,就可以点击到,无需另外写滑动元素的代码. 如果特殊情况需要滑 ...

  7. 【移动自动化】【二】Appium

    实施自动化需要的工具 adb Android控制工具,获取获取Android各种数据和控制,Appium会调起adb命令去执行Android设备 adb命令参考 https://www.cnblogs ...

  8. 【PUPPETEER】初探之获取元素文本值（三）

    一.知识点 page.$eval(selector, pageFunction[, ...args]) page.$$eval(selector, pageFunction[, ...args]) i ...

  9. 电脑adb命令给智能电视安装APK

    配置环境 1.电脑需要配置好adb系统环境 具体操作较复杂,请自行百度. 2.电视打开adb命令 在电视的关于界面通过遥控器「上上下下左右左右」进入工厂模式,在「高级设置」-「其他」中的「adb开关」 ...

  10. C++基础知识篇：C++ 变量作用域

    作用域是程序的一个区域,一般来说有三个地方可以定义变量: 在函数或一个代码块内部声明的变量,称为局部变量. 在函数参数的定义中声明的变量,称为形式参数. 在所有函数外部声明的变量,称为全局变量. 我们 ...