做到一个活动，需要转盘抽奖，于是想到使用css3的动画效果，其中主要包含transition的动画过渡，transform的rotate的旋转效果，在这里只用到2d的旋转，

特别强调的是，因为需要和后台做交互，是后台决定你获得什么奖然后把结果传给前台，还是前台决定你获得什么奖把内容传给后台，这里需要你们自行决定，我在这里使用的是后台决定获奖内容，然后前台控制角度。

这里，我设定转盘在3秒内转5圈，然后计算几等奖，然后转盘转到相应位置。agax属于请求中奖代号，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>旋转</title>

    <style type="text/css" media="screen">

        *{

            margin: 0;padding: 0;

        }

        #parent{

            position: relative;

            width: 310px;

            height: 310px;

        }

        #rotate{

            width: 310px;

            height: 310px;

            transition: all 3s;

        }

        #zhen{

            position: absolute;

            left: 86px;

            top: 65px;

            width: 130px;

            height: 154px;

        }

        .aa{

            width: 130px;

            height: 154px;

        }

    </style>

    <script src="jquery.min.js" type="text/javascript" ></script>

</head>

<body>

    <div id="parent">

        <div id="rotate"><img src="0.png"></div>

        <div id="zhen"><img class="aa" src="pointer2.png"></div>

    </div>

    <script type="text/javascript">

        $(function(){

            var bTag = 0;//点击次数

            $('#zhen').click(function(){

                // $.ajax({

                //     url:'',

                //     type:'get',

                //     data:{

                //         userId:userId

                //     },

                //     success:function(data){

                //         if(data.result){

                //             console.log('您有一次抽奖机会');

                //             //5quan=1800 最低旋转180度

                //             if(data.code == 1){//一等奖

                //                 var  aa = Math.floor(Math.random()*46)+(2160+bTag*1800)+'deg';

                //             }

                //             if(data.code == 2){//二等奖

                //                 var  aa = Math.floor(Math.random()*46)+(2115+bTag*1800)+'deg';

                //             }

                //             if(data.code == 3){

                //                 var  aa = Math.floor(Math.random()*46)+(2070+bTag*1800)+'deg';

                //             }

                //             if(data.code == 4){

                //                 var  aa = Math.floor(Math.random()*46)+(2025+bTag*1800)+'deg';

                //             }

                //             if(data.code == 5){

                //                 var  aa = Math.floor(Math.random()*46)+(1980+bTag*1800)+'deg';

                //             }

                //             if(data.code == 6){

                //                 var  aa = Math.floor(Math.random()*46)+(1935+bTag*1800)+'deg';

                //             }

                //             if(data.code == 7){

                //                 var  aa = Math.floor(Math.random()*46)+(1890+bTag*1800)+'deg';

                //             }

                //             if(data.code == 8){

                //                 var  aa = Math.floor(Math.random()*46)+(1800+bTag*1800)+'deg';

                //             }

                //         }

                //     }

                // })

                bTag++;

                var cc = "rotate("+aa+")";

                console.log(cc);

                $("#rotate").css({'transform':cc})

            })

        })

    </script>

</body>

</html>

css3转盘抽奖的更多相关文章

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

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

  2. javascript 转盘抽奖代码和计数器代码

    要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下  看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究...  效果预览: 一.模拟抽奖的实 ...

  3. web：转盘抽奖

    移动web:转盘抽奖(幸运大转盘)   为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转 ...

  4. 移动web：转盘抽奖(幸运大转盘)

    为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...

  5. canvas转盘抽奖的实现(二)

    本篇是<canvas转盘抽奖的实现(一)>的另一种实现方法,主要通过css3的transform以及transition过渡来实现.     // ' + r + '等奖'; } draw ...

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

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

  7. js实现转盘抽奖

    大转盘抽奖,主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现. 通常,抽奖的过程需要渐进的效果,所以直接通过旋转属性写比较繁琐. 这 ...

  8. HTML5 Canvas绘制转盘抽奖

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

  9. canvas转盘抽奖

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

随机推荐

  1. 谁用光了磁盘？Docker System命令详解

    译者按: Docker镜像,容器,数据卷以及网络都会占用主机的磁盘空间,这样的话,磁盘很容易就会被用完.这篇博客介绍了一个简单的解决方案 - Docker System命令. 原文: What's e ...

  2. oracle调用array参数存储过程

    declare -- Non-scalar parameters require additional processing files tyt_gas2014_search; ,); temp1 t ...

  3. kNN算法个人理解

    新手,有问题的地方请大家指教 训练集的数据有属性和标签 同类即同标签的数据在属性值方面一定具有某种相似的地方,用距离来描述这种相似的程度 k=1或则较小值的话,分类对于特殊数据或者是噪点就会异常敏感, ...

  4. ActiveMQ学习心得：连接池的简单实现和模板模式的应用

    一.安装activemq 下载地址:https://archive.apache.org/dist/activemq/5.13.0/apache-activemq-5.13.0-bin.zip 下载完 ...

  5. 拦截器的四种拦截方式以及Filter的执行顺序（17/4/8）

    一:拦截方式 需要在配置文件web.xml配置 在对应filter-mapping节点下 如下 <filter-mapping> <filter-name>BFilter< ...

  6. linux 基础（1）

    第一章 Linux 基础知识(一) 一.硬件介绍: 由一条总线把CPU.内存和I/O设备串联起来并与其他设备进行通信.CPU负责运算,内存用于储存临时变量,硬盘用于储存数据.1.1处理器CPU 从内存 ...

  7. Jmeter察看结果树的响应数据中的中文显示乱码问题处理

    1.Jmeter的察看结果树的响应数据有中文时会显示乱码,如图,我访问百度HTTP请求,响应数据中的title处是一串乱码 2.我们需要改一个设置,打开jmeter\bin\jmeter.proper ...

  8. 厉害了我的雅虎！卖掉主业后更名为阿里他爸(Altaba)

    据雅虎周一向美国证券交易委员会(SEC)提交的文件显示,在美国通信巨头Verizon斥资48亿美元收购雅虎的交易完成后,该公司首席执行官玛丽莎o梅耶尔(Marissa Mayer)将退出公司董事会. ...

  9. .net使用RabbitMQ

    前面的两篇博文算是把RabbitMQ的基础了解了下,今天学习.Net 中RabbitMQ的使用.原本这篇博文是应该上周写的,可在自己使用的过程中出现了一个问题bug:就是在连接服务端时,一直报下面的错 ...

  10. java文件的读写操作

    java文件的读写操作主要是对输入流和输出流的操作,由于流的分类很多,所以概念很容易模糊,基于此,对于流的读写操作做一个小结. 1.根据数据的流向来分: 输出流:是用来写数据的,是由程序(内存)--- ...