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

    今天咱们来看一下有关HTML的相关基础内容 学过.net的对HTML不会陌生 但是对于想单纯的了解下HTML的可能对他不是很了解 男的可以这么理解HTML=How To Make Love 咳咳,请上 ...

  2. sizeof 与 strlen

    一.sizeof     sizeof(...)是运算符,其值在编译时即计算好了,参数可以是数组.指针.类型.对象.函数等.    它的功能是:获得保证能容纳实现所建立的最大对象的字节大小.    由 ...

  3. 任务十二：学习CSS 3的新特性

    任务目的 学习了解 CSS 3 都有哪些新特性,并选取其中一些进行实战小练习 任务描述 实现 示例图(点击查看) 中的几个例子 实现单双行列不同颜色,且前三行特殊表示的表格 实现正常状态和focus状 ...

  4. SpringMVC4+MyBatis+SQL Server2014 基于SqlSession实现读写分离（也可以实现主从分离）

    前言 上篇文章我觉的使用拦截器虽然方便快捷,但是在使用读串还是写串上你无法控制,我更希望我们像jdbc那样可以手动控制我使用读写串,那么这篇则在sqlsession的基础上实现读写分离, 这种方式则需 ...

  5. cmapx 保存绘制好的图层

    研究了两天,如何保存一绘制好的图层,大致意思都说要使用mapInfo表,然后确定了可定和.TAB表有关.然而网上说的全是垃圾,也不能说全是垃圾,好歹我从中得到了一点点有用的信息,使用mapManage ...

  6. webpack中利用require.ensure()实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  7. Expression表达式树动态查询

    在进行数据列表的查询中,我们通常会使用两种方式进行查询: linq查询 数据库sql语句查询 这样固然可以实现查询,本人之前也都是这么做的,因为查询的条件很少.使用linq,可以将所有的查询条件的属性 ...

  8. Android打开其它应用程序

    PackageManager pm = getPackageManager(); Intent i = pm.getLaunchIntentForPackage(packageName); start ...

  9. vue视频学习笔记07

    video 7 vue问题:论坛http://bbs.zhinengshe.com------------------------------------------------UI组件别人提供好一堆 ...

  10. NIO Socket编程实例

    1.阻塞模式实例 NIOUtil类,用来通过SOcket获取BufferedReader和PrintWriter. package IO; import java.io.BufferedReader; ...