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. Flume笔记--source端监听目录，sink端上传到HDFS

    官方文档参数解释:http://flume.apache.org/FlumeUserGuide.html#hdfs-sink 需要注意:文件格式,fileType=DataStream 默认为Sequ ...

  2. Jasper_filter data_pass field data from main to sub to filter some data

    main report: 1 add variable <variable name="Variable_rule" class="java.lang.String ...

  3. ubuntu新建某个目录的快捷方式到桌面，有三种方法

    0. ln -sf /home/wjs ~/Desktop (wjs是我的登录用户名). 1. 在文件浏览器里 ,目录的右键有个make link 或 创建链接 ,然后cut or copy 到 桌面 ...

  4. [LeetCode 116 117] - 填充每一个节点的指向右边邻居的指针I & II (Populating Next Right Pointers in Each Node I & II)

    问题 给出如下结构的二叉树: struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *next; } ...

  5. 五个新知识：微软SHA2补丁，亚信专业工具，微软官方文档，使用过期签名（附官方推荐链接），注意使用具有UAC的CMD

    五个新知识:微软SHA2补丁,亚信专业工具,微软官方文档,使用过期签名 不支持SHA2算法的计算机更新补丁:https://technet.microsoft.com/zh-CN/library/se ...

  6. 【转】Thunderbird on Ubuntu 12.04 – 调整邮件列表行间距

    原文网址:http://www.xuebuyuan.com/414703.html markz@markz-hp6200:~$ cd .thunderbird/ markz@markz-hp6200: ...

  7. hdu 2256 Problem of Precision

    点击打开hdu 2256 思路: 矩阵快速幂 分析: 1 题目要求的是(sqrt(2)+sqrt(3))^2n %1024向下取整的值 3 这里很多人会直接认为结果等于(an+bn*sqrt(6))% ...

  8. 安装nodejs 后运行 npm 命令无响应处理方法

    安装和卸载过nodejs, 也编辑过 C:\Users\{账户}\下的.npmrc文件. 再全新安装nodejs ,运行npm 命令,无响应. 处理方法,删除C:\Users\{账户}\下的.npmr ...

  9. lesson3.1:java公平锁和非公平锁及读写锁

    关于这四种锁的各自情况,网上有很多文章做了介绍,本不想单独开章节介绍,本章只介绍这四种锁的一些源码特点及注意事项. demo 源码:https://github.com/mantuliu/javaAd ...

  10. [置顶] ARM指令集和常用寄存器

    1) ARM指令集 32位的 ARM指令和 16位 的Thumb指令 1,寄存器寻址 MOV R1, R2  //将寄存器R2的值传给寄存器R1 2,立即寻址 MOV R0, #0XFF00 //数据 ...