jqueryrotate.js抽奖转盘，使用方便，兼容各浏览器，效果如下图

<!DOCTYPE>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>转盘抽奖</title>

<script src="js/jquery-1.11.0.min.js"></script>

<script src="js/Rotate.js"></script>

<style>

*{padding:0; margin:0;}

.lotteryMain{ width:100%; padding:20px 0; }

.lotteryBg{ width:520px; height:520px; margin:0 auto; background:url(images/lotteryBg.jpg) no-repeat; position:relative; overflow:hidden;}

#run{ width:153px; height:214px; position:absolute; left:50%; top:50%;  margin-left:-76px; margin-top:-107px; z-index:1; transform:rotate(0deg); -ms-transform:rotate(0deg); }

#btn_run{ width:125px; height:125px; background:url(images/btn_start.png) no-repeat; border:none; outline:none; position:absolute; left:50%; top:50%; margin-left:-62px; margin-top:-62px; z-index:2;cursor:pointer;}

</style>

</head>

<body>

<section class="lotteryMain">

    <div class="lotteryBg">

        <img id="run" src="data:images/start.png" />

        <input id="btn_run" type="button" value="" />

    </div>

    <div id="results">

    </div>

</section>

<script>

$(function(){

     $("#btn_run").click(function(){

        $("#btn_run").attr('disabled',true).css("cursor","default");

        lottery();

    });

});

function lottery(){

    $.ajax({

        type: 'get',

        url: 'json2.js',

        dataType: 'json',

        cache: false,

        error: function(){return false;},

        success:function(obj){

                $("#run").rotate({

                    duration:3000, //转动时间

                    angle: 0, //默认角度

                    animateTo:360*6+obj.rotate, //转动角度

                    easing: $.easing.easeOutSine,

                    callback: function(){

                        alert(obj.results);

                    $("#btn_run").attr('disabled',false).css("cursor","pointer");

                    }

                });

        }

    });

};

</script>

</body>

</html>

json.js里是个json对象，模拟服务器返回的数据，{"isHasChance":"true","rotate":240,"results":"iphone 5s!!"}

demo下载（放在IIS上运行）

抽奖转盘（jqueryrotate.js）的更多相关文章

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

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

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

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

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

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

  4. jquery实现抽奖转盘

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

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

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

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

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

  7. jQuery抽奖插件 jQueryRotate

    实现代码 网页中引用 <script type="text/javascript" src="js/jquery.min.js"></scri ...

  8. css 如何“画”一个抽奖转盘

    主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果. 先来张效果图: 布局 一般来说,转盘一般有四个部分组成:外层闪烁的灯.内层旋转的圆盘.圆盘上的中奖结果.指针. 所 ...

  9. 模仿抽奖转盘,并且用cookie记录历史次数

    自己制作了一个模仿抽奖转盘的小游戏,代码比较简单,规则是只有三次抽奖机会,并且浏览器会记录抽奖的次数, 代码如下 <!DOCTYPE html> <html> <head ...

随机推荐

  1. for-in语句

    <script type="text/javascript"> /* for-in语句: for-in语句的格式: for(var 变量名 in 遍历的目标){ } f ...

  2. nginx 中location和root

    nginx 中location和root,你确定真的明白他们关系? 2016-01-17 14:48 3774人阅读 评论(1) 收藏 举报  分类: linux(17)  版权声明:本文为博主原创文 ...

  3. Android事件监听器Event Listener

    在 Android 中,我们可以通过事件处理使UI与用户互动(UI Events). UI的用户事件处理,即View处理用户的操作,在应用程序中几乎不可避免.View是重要的类,它是与用户互动的前线: ...

  4. Sicily 1936. Knight Moves

    题目地址:1936. Knight Moves 思路: 这道题一开始不理解题意…orz...囧,看大神们理解的. 题意是说一个8*8的国际象棋,骑士以马的形式走动(“日”字型),指定两个点,输出最小的 ...

  5. Entity Framework with MySQL 学习笔记一(关系整理版)

    1-1 设置 //DataAnnotation 1-1 | 1-0 table //SQLtable : member , columns : memberId, name //SQL basic l ...

  6. Altium Designer中各层的含义

    1 Signal layer(信号层) 信号层主要用于布置电路板上的导线.Protel 99 SE提供了32个信号层,包括Top layer(顶层),Bottom layer(底层)和30个MidLa ...

  7. libCurl的C++引用

    I believe I have gotten LibCurl to work with Visual Studio 2013 now. Persistence ftw! Although, afte ...

  8. BZOJ3479: [Usaco2014 Mar]Watering the Fields

    3479: [Usaco2014 Mar]Watering the Fields Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 81  Solved: ...

  9. hdu5136：组合计数、dp

    题目大意: 求直径长度为N的无根二叉树的个数(同构的只算一种) 分析: 分析发现直径长度不好处理!因此考虑把问题转化一下: 假设要求直径为N的二叉树 (1) 若N为偶数,将树从直径中点的边断开,则分成 ...

  10. vb安装过程中 ntvdm.exe[9696]中发生未处理的win32异常

    最近电脑总是出问题导致我的学习效率很低,前几天在用VB6.0的时候有个知识点不太熟悉,于是按F1发现不会出来帮助文档.突然想到重新装系统之后忘记了安装MSDN帮助插件,就在我安装这个软件的时候发现电脑 ...