抽奖转盘(jqueryrotate.js)

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

抽奖转盘(jqueryrotate.js)

抽奖转盘(jqueryrotate.js)
抽奖转盘(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="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:3, //转动时间 
                    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>
View Code

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

demo下载(放在IIS上运行)

 

更多相关文章
  • 易网科技讯 3月30日消息,在2014年IT领袖峰会上,中国国际金融有限公司总裁兼CEO朱云来向易网科技表示,对于互联网金融中可能存在的系统性风险,需要谨慎监管.朱云来在峰会上指出,目前互联网金融的创新作为新生事物,也引起了比较激烈的竞争,但金融作为社会生活中主要的支柱性体系,如何形成职能.如何保证 ...
  • 概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在其中你可以看到C#.Java.Javascript.Python等多种语言的影子.同时在2015年的 ...
  • 我们可以利用DexClassLoader来实现动态加载dex文件,而很多资料也只是对于DexClassLoader的使用进行了介绍,没有深入讲解dex的动态加载机制,我们就借助于Android4.4的源码来探索.先从一个简单的动态加载dex文件开始 具体实现细节可以参考这篇文章AndroidDex数 ...
  • BST 以下BST的定义来自于Wikipedia: Binary Search Tree, is a node-based binary tree data structure which has the following properties: The left subtree of a nod ...
  • 去年刚毕业来公司后,做为新人,发现很多东西都没有文档,各种工具和地址都是口口相传的,而且很多时候都是不知道有哪些工具可以使用,所以当时就想把自己接触到的这些东西记录下来,为后来者提供参考,相当于一个路线图,帮助新人尽快上手. 本文介绍的我所在小组的一些开发流程及相关工具.做为新人入门手册,其中某些工 ...
  • 在我前前面已经说过组合类的概念了,今天我再介绍两个类,友元,以及内部类. 组合类,就是一个类中有另一个类的对象,如声明一个class penson,成员变量有姓名,年龄,出生日期等,在声明一个date类,这个类里面就是存的年月日的信息,因此我们可以将person类的出生日期设为date类,这就构成了 ...
一周排行
  • ClassLoader Java程序并不是一个原生的可执行文件,而是由许多独立的类文件组成,每一个文件对应一个Java类.此外,这些类文件并非立即全部装入内存的,而是根据程序需要装入内存.ClassLoader专门负 ...
  •   jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜素不到关于它 ...
  • Yii 中广泛的使用了路径别名.路径别名关联于一个目录或文件的路径.它以点号语法指定,类似于广泛使用的名字空间(namespace)格式:RootAlias.path.to.target 其中的 RootAlias  ...
  • 畅游的两处xss,大站其余洞洞不好找啊.两个xss,给个注册码吧,提交了好多,通过的没给,不通过的为啥也修复了..   反射型地址为:http://gm.changyou.com/login.jsp?msg=%3C/ ...
  • 前面的文章提到如何利用Interlocked API设计系统级日志.Interlocked API可以对在多线程之间共享的内存变量提供原子性访问.有些CPU在硬件层面上直接支持这些操作,如80386以后的X86架构C ...
  • 序列中的字符串 字符串是序列的一种,序列的基本操作字符串都可以使用. 序列的基本操作有8种,索引,分片,加,乘,检查成员资格(in),计算序列长,找出最小最大元素 格式化字符串可以是任意类型,这里使用元组 ( , , ...
  • ■这是公安机关缴获的犯罪分子使用的银行卡.新华社发 网银盗窃案频发冲击网络金融安全 据新华社电 随着信息网络技术的高速发展,方便快捷的网上银行在日常金融活动中愈发普及.然而,近期全国各地频发假冒银行网站骗取客户密码. ...
  • 一台联想C750笔记本准备退役了,Windows XP速度极慢,光驱也坏了,于是想让其发挥余热,装一个Linux继续用着,本想装Redhat Enterprise AS4,无奈显卡兼容性太差,图型安装界面显示不正常, ...
  •        这是一篇比较具有深度的关于房地产企业信息化的评论,记得比较经典的一段论述是:.“祸端自是君王起,倾国何须怨玉环.”房企自身存在的诸如观念滞后.管理粗放.流程混乱.人才机制缺位等深层次问题,才是其信息化失 ...
  • iPhone6iOS8系统的功能确实很强大,但是有些功能对于一般用户来说,一点用都没有,既然没有用,那就关闭好了,有三个功能是必须关闭的 不可否认iPhone6iOS8系统的功能确实很强大,但是其中的有些功能对用户而 ...