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. Swift—使用try?和try!区别-备

    在使用try进行错误处理的时候,经常会看到try后面跟有问号(?)或感叹号(!),他们有什么区别呢? 1.使用try?  try?会将错误转换为可选值,当调用try?+函数或方法语句时候,如果函数或方 ...

  2. 真正的手机破解wifi密码，aircrack-ng,reaver,仅限mx2（BCM4330芯片）

    仅限mx2(BCM4330芯片),mx可能有戏没测试(BCM4329?),mx3不行. PS:原生安卓应用,非虚拟机 reaver,不知道是啥的看这里http://tieba.baidu.com/p/ ...

  3. 『电脑技巧』浅谈Win7的文件共享设置

    随着移动存储设备的普及,很少有小伙伴喜欢使用局域网“文件共享”这一捷径了 而且自从XP之后,Windows系列主机共享设置貌似比较麻烦 虽然事实并不是看上去那样(Win7也很Easy的说 = =) 现 ...

  4. 转：VC中WORD,DWORD,unsigned long,unsigned short的区别(转)

    typedef unsigned long       DWORD;typedef int                 BOOL;typedef unsigned char       BYTE; ...

  5. 转：MFC文件操作

    讲到文件操作我们会联想到自己手动操作文件会涉及到哪些内容.很容易想到的是查看文件(文件夹)是否存在,创建,复制,删除,剪切文件(文件夹).另外就是设置文件的属性. 那MFC中一些操作文件的类也差不多是 ...

  6. strnclmp和strlen函数的用法

    一.strncmp 函数 函数原型: 1.函数原型:int strncmp (const char *s1, const char *s2, size_t  n) 2.头文件: <string. ...

  7. Altium Designer中Via过孔设置

  8. 安卓u8800刷机

    一篇非常好的帖子:http://bbs.anzhi.com/thread-5113728-1-1.html 虽然不是什么大神,不过在两个QQ群里和这里解答过N多刷机和ROOT中遇到的问题了...而且伸 ...

  9. 【转】Android开发工具--android-studio-bundle-141.2288178

    原文网址:http://www.androiddevtools.cn/ AndroidDevTools简介 Android Dev Tools官网地址:www.androiddevtools.cn 收 ...

  10. 2015第29周六Spring

    搜了一下Spring相关的经典书籍: <Spring实战(第3版)>从核心的Spring.Spring应用程序的核心组件.Spring集成3个方面,由浅入深.由易到难地对Spring展开了 ...