做到一个活动，需要转盘抽奖，于是想到使用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. mysql数据库实操笔记20170419

    一.insert与replace区别: insert:当表里有字段设置了主键或者唯一时,插入重复的唯一或主键字段值是不能执行的: replase:当表里有字段设置了主键或者唯一时,插入重复的唯一或主键 ...

  2. iOS WebView你需要的问题答案

    一.UIWebView 可以加载和显示某个URL的网页,也可以显示基于HTML的本地网页或部分网页: a. 加载 URL WebView = [[UIWebView alloc] initWithFr ...

  3. 解析View的getDrawingCache方法

    1． View 的getDrawingCache方法 有时候需要将某个view的内容以图片的方式保存下来,感觉就和截图差不多,可以使用View 的getDrawingCache方法,返回一个Bitma ...

  4. Oracle GoldenGate中HANDLECOLLISIONS参数使用详解

    Oracle GoldenGate中HANDLECOLLISIONS参数使用详解   HANDLECOLLISIONS 是一个 replicat 进程参数,主要在 initial load 中使用.在 ...

  5. 在 ubuntu 下优雅的使用 Sublime Text 3 写 Python

    此文章非技术文,就是一些对于 Sublime 俺之前经常用的 方法(快捷键 )和 工具 有一些工具俺也用过,但是效果不太好,可以说跟shi 一样,可能每个人的用处不一样,咱就不提了,免得招 来口舌之争 ...

  6. RocketMQ 介绍与基本使用

    介绍 RocketMQ是阿里巴巴自研的第三代分布式消息中间件,是阿里系下开源的一款分布式.队列模型的消息中间件,原名Metaq,3.0 版本名称改为RocketMQ,是阿里参照kafka设计思想使用J ...

  7. JS第二弹:用Jquery组装html标签,输出到页面

    用Ajax从服务端获取数据,遍历到表格中(其实将表格替换了),中间发现不能为新增的元素绑定事件,原来是没有将其作为JQ对象

  8. JavaScript ,Python,java,C#,Go系列算法之【插入排序篇】

    常见的内部排序算法有:插入排序.希尔排序.选择排序.冒泡排序.归并排序.快速排序.堆排序.基数排序等.用一张图概括: 插入排序 插入排序(英语:Insertion Sort)是一种简单直观的排序算法. ...

  9. 使用Tomcat-redis-session-manager来实现Tomcat集群部署中的Session共享

    一.工作中因为要使用到Tomcat集群部署,此时就涉及到了Session共享问题,主要有三种解决方案: 1.使用数据库来存储Session 2.使用Cookie来存储Session 3.使用Redis ...

  10. 如何实现在Windows上运行Linux程序，附示例代码

    微软在去年发布了Bash On Windows, 这项技术允许在Windows上运行Linux程序, 我相信已经有很多文章解释过Bash On Windows的原理, 而今天的这篇文章将会讲解如何自己 ...