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. java-map-EnumMap

    在平常的项目中,enumMap是比较少用到的一种map,一般都不会使用到这种容器,那么我将从如下几个方面来阐述我对enumMap的理解 1.使用场景 在key是比较固定的情况下,使用enumMap是最 ...

  2. 转;VC++中Format函数详解

    Format是一个很常用,却又似乎很烦的方法,以下是它的完整概貌,以供大家查询之用: 一.字符串 首先看它的声明: function Format(const Format: string; cons ...

  3. hdu 4544 湫湫系列故事——消灭兔子

    http://acm.hdu.edu.cn/showproblem.php?pid=4544 优先队列+贪心. #include <cstdio> #include <queue&g ...

  4. Valve开源了Direct3D到OpenGL的转译层,方便开发者迁移游戏到Linux（面向游戏玩家的六款最佳 Linux 发行版）

    Valve开源了Direct3D到OpenGL的转译层,方便开发者迁移游戏到Linux:https://github.com/ValveSoftware/ToGL Valve SteamBox主机系统 ...

  5. JavaScript 比较操作符，严格比较===

    JavaScript 有两种比较方式:严格比较运算符和转换类型比较运算符.对于严格比较运算符(三个 =)来说,为ture的情况是仅当两个操作数拥有相同的类型,而对于被广泛使用的比较运算符(两个 =)来 ...

  6. javaweb笔记之get和post的不同

    1 GET方式 1)提交的参数数据会放在请求信息的URL后面.以?开头,多个参数数据以 & 分 割. 2)浏览器的地址会发生改变 3)参数数据的容量不能超过1KB. 4)不适合敏感数据的提交 ...

  7. Python读取txt文件

    Python读取txt文件,有两种方式: (1)逐行读取 data=open("data.txt") line=data.readline() while line: print ...

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

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

  9. 跟我一起学extjs5(22--模块Form的自己定义的设计)

    跟我一起学extjs5(22--模块Form的自己定义的设计)         前面几节完毕了模块Grid的自己定义,模块Form自己定义的过程和Grid的过程类似,可是要更复杂一些.先来设计一下要完 ...

  10. J2EE (十) 简洁的JSTL、EL

    简介 JSTL(JSP Standard Tag Library ,JSP标准标签库)是一个不断完善的开放源代码的JSP标签库. 由四个定制标记库(core.format.xml 和 sql)和一对通 ...