jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

在线实例

查看演示

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>jQuery幸运大转盘_jQuery+PHP抽奖程序(上)</title>

        <style type="text/css">

            .demo{ position:relative;width:417px;}

            #disk{width:417px; height:417px; background:url(/api/jq/5733e347040d9/images/disk.jpg) no-repeat;}

            #start{width:163px; height:320px; position:absolute; top:46px; left:130px;}

            #start img{cursor:pointer}

        </style>

    </head>

    <body>

        <div class="container">

            <div class="demo">

                <div id="disk"></div>

                <div id="start"><img src="/api/jq/5733e347040d9/images/start.png" id="startbtn" alt="转盘开启"/></div>

            </div>

        </div>

        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>

        <script type="text/javascript" src="/api/jq/5733e347040d9/jQueryRotate.2.2.js"></script>

        <script type="text/javascript" src="/api/jq/5733e347040d9/jquery.easing.min.js"></script>

        <script type="text/javascript">

            $(function() {

                $("#startbtn").rotate({

                    bind: {

                        click: function() {

                            var random = Math.floor(Math.random() * 360); //生成随机数

                            $(this).rotate({

                                duration: 3000, //转动时间间隔（速度单位ms）

                                angle: 0, //指针开始角度

                                animateTo: 3600 + random, //转动角度，当转动角度到达3600+random度时停止转动。

                                easing: $.easing.easeOutSine, //easing动画效果

                                callback: function() {  //回调函数

                                    alert('恭喜您，中奖了！');

                                }

                            });

                        }

                    }

                });

            });

        </script>

    </body>

</html>

　　

jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现的更多相关文章

  1. jQuery幸运大转盘_jQuery+PHP抽奖程序

    http://www.thinkphp.cn/code/1153.html 网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序. 若是想看更多js特效.网站源码. ...

  2. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  3. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  4. PHP+AJAX开发幸运大转盘抽奖

    PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...

  5. asp.net+jQueryRotate开发幸运大转盘

    在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...

  6. PHP幸运大转盘源码，支持ThinkPHP

    原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之 ...

  7. html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...

  8. Vue 幸运大转盘

    转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不 ...

  9. 跟我一起学编程—《Scratch编程》第24课：幸运大转盘

    同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...

随机推荐

  1. Struts2 DomainModel、ModelDriven接收参数

    一.DomainModel(域模型) 1. 应用场景:一般我们在struts2的action中接收参数通常是如下方式 package cn.orlion.user; import com.opensy ...

  2. 打开都是“Smart Adobe CC Blocker v1.0”已损坏，打不开。 您应该将它移到废纸篓。

    安全设置里允许任意来源打开就可以了 “系统偏好设置”->“安全性与隐私”->“允许从以下位置下载的应用程序”->任何来源.

  3. Android自定义EditText去除边框并添加下划线

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. 实战：微信小程序支付开发具体流程

    来源:授权地址作者:会编码的熊 该文章纪录了我在开发小程序支付过程中的具体流程 1. 申请微信支付 小程序认证后进入微信支付申请小程序的微信支付 填写企业信息对公账户并上传凭证后,微信支付会打一笔随机 ...

  5. CP/IP，SPDY，WebSocket 三者之间的关系

    按照OSI网络分层模型,IP是网络层协议,TCP是传输层协议,而HTTP是应用层的协议.在这三者之间,SPDY和WebSocket都是与HTTP相关的协议,而TCP是HTTP底层的协议.一.HTTP的 ...

  6. 【转】 依赖注入框架Autofac的简单使用

    Autofac是一款IOC框架,比较于其他的IOC框架,如Spring.NET,Unity,Castle等等所包含的,它很轻量级性能上也是很高的.于是,今天抽空研究了下它.下载地址:http://co ...

  7. C语言学习005:不能修改的字符串

    一段有问题的代码,你能看出来么? int main(){ char* msg="ABC"; msg[]=msg[]; puts(msg); ; } 编译这段代码并不会有什么问题,一 ...

  8. LINQ的Any方法

    返回布尔值,判断集合中是否有元素满足某一条件. source code: IEnumerable<string> str = new List<string> { " ...

  9. ASP.NET MVC 请求流程：Controller

    1.请求进入时,.NET Framework就找出所有的HttpModule,以此调用它们的Init方法,如下图所示,我们重点关注"UrlRoutingModule-4.0"的Ht ...

  10. 炉石传说 C# 开发笔记 （源代码整理公开）

    源代码已经整理过了,去除了不需要的项目. 注意:以前文章中出现过的Git已经变更过了,请以前关注过,Fork过的朋友,重新Fork一下. GitHub地址 卡牌XML文件的做成:(Git上面是没有XM ...