<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>抽奖</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <style>

            * {

                padding: ;

                margin: ;

                -moz-box-sizing: border-box;

                -webkit-box-sizing: border-box;

                -o-box-sizing: border-box;

                -ms-box-sizing: border-box;

                box-sizing: border-box;

                font-size: %;

            }

            .content {

                width: %;

                height: auto;

                background: url('./images/bg.png') no-repeat;

                background-size: % auto;

                position: relative;

            }

            .content .rotateBox {

                width: %;

                height: auto;

                margin-top: 25px;

                position: relative;

            }

            .content .rotateBox .bg {

                display: block;

                width: %;

                height: auto;

            }

            .content .rotateBox .star {

                display: inline-block;

                position: absolute;

                top: %;

                left: %;

                -webkit-transform: translate(-%, -%);

                -moz-transform: translate(-%, -%);

                -ms-transform: translate(-%, -%);

                transform: translate(-%, -%);

                width: %;

                height: %;

                background: url('./images/btn.png') center center no-repeat;

                background-size: %;

            }

            .content .rotateBox .show {

                position: absolute;

                top: %;

                left: %;

                width: %;

                height: %;

                background: url('./images/car.png') top center no-repeat;

                background-size: 40px auto;

            }

            .content .infor {

                width: %;

                margin-top: 25px;

                padding: 25px 30px 35px 40px;

                background: url('./images/bg2.png') no-repeat;

                background-size: % auto;

            }</style>

    </head>

    <body>

        <div class="content">

            <div class="rotateBox">

                <img src="./images/img.png" alt="" class="bg" />

                <span class="show"></span>

                <span class="star"></span>

            </div>

        </div>

    </body>

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

    <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>

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

    <script>

        $(function() {

            var $btn = $('.show'); // 旋转的div

            var playnum = ; //初始次数，由后台传入

//            $('.playnum').html(playnum); //显示还剩下多少次抽奖机会

            var isture = ; //是否正在抽奖

            var clickfunc = function() {

                var data = [, , , , , ]; //抽奖

                //data为随机出来的结果，根据概率后的结果

                data = data[Math.floor(Math.random() * data.length)]; //1~6的随机数

                switch(data) {

                    case :

                        rotateFunc(, , '恭喜您获得2000元理财金');

                        break;

                    case :

                        rotateFunc(, , '恭喜您获得2000元理财金2');

                        break;

                    case :

                        rotateFunc(, , '恭喜您获得2000元理财金3');

                        break;

                    case :

                        rotateFunc(, -, '谢谢参与4');

                        break;

                    case :

                        rotateFunc(, , '谢谢参与5');

                        break;

                    case :

                        rotateFunc(, , '谢谢参与6');

                        break;

                }

            }

            $(".star").click(function() {

                if(isture) return; // 如果在执行就退出

                isture = true; // 标志为 在执行

                if(playnum <= ) { //当抽奖次数为0的时候执行

                    alert("没有次数了");

//                    $('.playnum').html(0); //次数显示为0

                    isture = false;

                } else { //还有次数就执行

                    playnum = playnum - ; //执行转盘了则次数减1

                    if(playnum <= ) {

                        playnum = ;

                    }

//                    $('.playnum').html(playnum);

                    clickfunc();

                }

            });

            var rotateFunc = function(awards, angle, text) {

                isture = true;

                $btn.stopRotate();

                $btn.rotate({

                    angle: , //旋转的角度数

                    duration: , //旋转时间

                    animateTo: angle + , //给定的角度,让它根据得出来的结果加上1440度旋转

                    callback: function() {

                        isture = false; // 标志为 执行完毕

                        alert(text);

                    }

                });

            };

        });

    </script>

</html>

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

  1. Android实现抽奖转盘

    一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...

  2. jquery实现抽奖转盘

    用jquery通过配置参数实现抽奖转盘 1.html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  3. JS：九宫格抽奖转盘实例

    工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示.可以用于取代一些flash抽奖程序. 机制说明: 1.通过定义lottery-unit来控制节点的个数及索引: 2.通过设置lottery ...

  4. Html5-Canvas实现简易的抽奖转盘

    ###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...

  5. 使用CSS3+jquery.js 实现微信抽奖转盘效果

    上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...

  6. 抽奖转盘（jqueryrotate.js）

    jqueryrotate.js抽奖转盘,使用方便,兼容各浏览器,效果如下图 <!DOCTYPE> <head> <meta http-equiv="Conten ...

  7. 利用java实现抽奖转盘(着重安全控制)

    本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...

  8. android仿漫画源码、抽奖转盘、Google相册、动画源码等

    Android精选源码 android实现仿今日头条的开源项目 波浪效果,实现流量的动态显示 美妆领域的app, 集成了摄像头取色, 朋友圈, 滤镜等 android仿漫画源码 android一个视差 ...

  9. 用CSS实现一个抽奖转盘

    效果 基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 首先画一个转盘, <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. Centos下Sphinx的下载与编译安装

    官方下载地址   http://sphinxsearch.com/downloads/release/ 百度云下载地址  https://pan.baidu.com/s/1gfmPbd5 wget  ...

  2. uva1347 经典dp

    详细的思路书上面有,有一点要强调的是题意容易理解错:必须严格向右或则向左移动,不能到了第3个点又回到第2个点.否则这个状态方程是不成立的,变成了NP难问题 状态方程: dp[i][j]=min(dp[ ...

  3. HDU - 4545 字符串处理

    思路:对于每个字符,如果它能被替换一定要优先替换,其次再进行删除.遵循这个策略即可. 证明: 对于这题的第一个测试数据: abba addba 1 d b 当匹配到'b'  和 'd'时应该优先替换而 ...

  4. C++ 中vector的使用方法（转）

    原地址:http://blog.csdn.net/duan19920101/article/details/50617190/ 在c++中,vector是一个十分有用的容器. 作用:它能够像容器一样存 ...

  5. Sping Boot入门到实战之入门篇（四）：Spring Boot自动化配置

    该篇为Sping Boot入门到实战系列入门篇的第四篇.介绍Spring Boot自动化配置的基本原理与实现.   Spring Boot之所以受开发者欢迎, 其中最重要的一个因素就是其自动化配置特性 ...

  6. 快速掌握Shell编程

    作者原创作品,转载请注明出处 (一)Shell编程概述 1.1 shell简述 Shell编程和JavaScript非常相似,Shell和JavaScript都是弱类型语言,同时也都是解释型语言.解释 ...

  7. linux dns子域授权 split分离解析 缓存dns服务器

    DNS子域授权作用:适用于同一个DNS组织父/子域名的解析工作由不同的dns服务器负责父dns服务器应该有为子域名迭代的能力 上下级区域属于不同的机构管理:.cn与.Anonymous.cn.cn需要 ...

  8. python每天一个小练习-列表元素非唯一

    列表元素非唯一 来源 checkio 需求 你将得到一个含有整数(X)的非空列表.在这个任务里,你应该返回在此列表中的非唯一元素的列表.要做到这一点,你需要删除所有独特的元素(这是包含在一个给定的列表 ...

  9. 笔记+R︱信用风险建模中神经网络激活函数与感知器简述

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 本笔记源于CDA-DSC课程,由常国珍老师主讲 ...

  10. 将搜狗词库（.scel格式）转化为txt格式

    参考:http://blog.csdn.net/zhangzhenhu/article/details/7014271 #!/usr/bin/python # -*- coding: utf-8 -* ...