做到一个活动，需要转盘抽奖，于是想到使用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. Devexpress 中对RedailMenu的使用

    最近项目中用到RadialMenu,效果图如下所示: 闲下来就对,devexpress中的RedialMenu的使用总结一下. 第一:假设RedialMenu中全部是BarButtonItem的情况. ...

  2. C语言结构体中字符数组的问题

    第一个程序 #include <stdio.h> #include <string.h> typedef struct student { char name[10]; int ...

  3. [CTSC2008] 网络管理

    题目描述 Description M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个部门之间协同工作,公司搭建了一个连接整个公司的通信网络.该网络的结构 ...

  4. 【国家集训队2012】tree(伍一鸣)

    Description 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一:  + u v c:将u到v的路径上的点的权值都加上自然数c:  - u1 v1 u2 ...

  5. 配置RMAN备份环境

    关于配置RMAN备份环境你可以给每个目标数据库设置一些固定的配置,这些配置控制着RMAN多个方面的行为.例如,你可配置备份的保存策略.默认的备份目录.默认的备份设备类型等.你可以用show命令来查看配 ...

  6. .net之简单工厂模式

    //抽象一个生产笔的方法 namespace simpleFactory{ public abstract class AbstractPen { public abstract void creat ...

  7. VirtualBox实现内外网络互访问的配置

    作者 jrl137824675 来源地址:http://www.2cto.com/os/201205/133370.html   环境: 宿主机操作系统            Windows XP s ...

  8. 【linux命令】打开关闭防火墙iptables

    防火墙关闭 关闭防火墙(linux) 经过自己的实验,发现在ubuntu中service iptables 无法使用. 同时,在init.d中并没有iptables的程序,iptables程序在/sb ...

  9. Struts2中的JSON问题——后台返回JSON字符串到前台

    最近做一个项目遇到一个比较棘手的问题,项目后台采用struts2+Hibernate3+Spring3,前台采用ExtJs4.笔者目前仍是一名大二学生吗,后台框架完全是毫无任何基础,从零学,现学现用. ...

  10. 关于web程序快速开发个人见解以及经历

    由于在之前公司业务的发展,需要在基于核心业务的基础上开发其他较为独立的业务系统,所以就有了这个基于Dapper,DDD概念的基础框架,由于个人基于这个框架已经经历过两个系统的开发,也因为其他项目团队需 ...