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. 《python基础教程》笔记之 其它语句1

    print 相关 print可以打印多个表达式,只要将它们用逗号隔开就好,结果中每个参数之间都会插入一个空格,使用+可以避免空格,如 >>> print 'age:',42age: ...

  2. android 通过代码设置drawableLeft

    /** * * @desc 设置左边图标 * @param @param drw * @return void */ public void setAlertLeftIcon(Drawable drw ...

  3. FMX手机app，如何下载网站图片而不卡界面

    你用的版本? 你应该关注下delphi 更新说明第一方法: 可以用线程.第二方法: TNetHTTPClient 已经支持异步 TThread.CreateAnonymousThread( proce ...

  4. tesseract-ocr图片识别开源工具

    tesseract-ocr图片识别开源工具 今天看同事的ppt,提到了图片识别,又tesseract-ocr,觉得不错,试一下,如果效果好可以用来做验证码的识别 http://code.google. ...

  5. Android手机音量的控制

    1.AudioManager audio=(AudioManager) super.getSystemService(Context.AUDIO_SERVICE);//获得手机的声音服务 //设置加音 ...

  6. css+javascript 写的HTML5 微信端输入支付密码键盘

    微信端没有纯数字键盘,用html5写了一个模仿ios输入支付密码键盘效果 keyboard.js var _keyboard = {}; $(document).ready(function(){ _ ...

  7. yii 使用 phpmailer发送邮件

    原文链接 :  http://www.yiiframework.com/extension/mailer/ 下载插件放在 :XXX/protected/extensions/ 作为一个普通的组建使用 ...

  8. PHP中字符串类型与数值类型混合计算

    字符串转数值的规则 当一个字符串被当作一个数值来取值,其结果和类型如下: 如果该字符串没有包含 '.','e' 或 'E' 并且其数字值在整型的范围之内(由 PHP_INT_MAX 所定义),该字符串 ...

  9. (Relax 数论1.8)POJ 1284 Primitive Roots(欧拉函数的应用: 以n为模的本原根的个数phi(n-1))

    /* * POJ_2407.cpp * * Created on: 2013年11月19日 * Author: Administrator */ #include <iostream> # ...

  10. 在jsp页面上直接打开PDF文件

    1.在不需要使用插件,直接打开通过链接方式打开 <%@ page language="java" import="java.util.*,java.io.*&quo ...