做到一个活动，需要转盘抽奖，于是想到使用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. vue2.0版cnode社区项目搭建及实战开发

    _________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力 ...

  2. HttpClient研究学习总结

    Http协议非常的重要,HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性(具体区别,日后我们再讨论),它不仅是客户端发送Http请求变得容易,而且也方便了开发人 ...

  3. JavaScript 中有关Array操作的一些函数

    JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素. 要取得Array的长度,直接访问length属性: var arr = [1, 0.222, 'Hi', null, ...

  4. OC中Foundation框架之NSArray、NSMutableArray

    NSArray概述 NSArray是OC中的数组类 NSArray特点 )只能存放任意OC对象,并且是有顺序的 )不能存放非OC对象,比如int/float/double/char/enum/stru ...

  5. 使用java API操作hdfs--拷贝部分文件到hdfs

    要求如下: 自行在本地文件系统生成一个大约一百多字节的文本文件,写一段程序(可以利用Java API或C API),读入这个文件,并将其第101-120字节的内容写入HDFS成为一个新文件. impo ...

  6. Elasticsearch中的相似度模型(原文：Similarity in Elasticsearch)

    原文链接:https://www.elastic.co/blog/found-similarity-in-elasticsearch 原文 By Konrad Beiske 翻译 By 高家宝 译者按 ...

  7. jQuery 一个你意想不到的代码神器！

    jQuery 一个你意想不到的代码神器! jQuery 选择器.(最简单,最基本) jquery选择器的优势: (1) 简洁的写法,$()函数 (2)支持CSS1到CSS3选择器 (3)完善的处理机制 ...

  8. 使用Browserify来实现CommonJS的浏览器加载

    前面的话 Nodejs的模块是基于CommonJS规范实现的,可不可以应用在浏览器环境中呢? var math = require('math'); math.add(2, 3); 第二行math.a ...

  9. 转：request.getSession(true)和request.getSession(false)的区别

    1.转自:http://wenda.so.com/q/1366414933061950?src=150 概括: request.getSession(true):若存在会话则返回该会话,否则新建一个会 ...

  10. 将github上的项目源码导入到eclipse中

    1.注册github帐号 在github上注册一个自己的帐号. 2.安装git插件egit 在eclipse中安装git插件egit,安装方法可以参考这篇文章: http://www.cnblogs. ...