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. 谈谈主函数main

    我们来看一下主函数 public class HelloWorld{ public static void main(String[] args){ System.out.println(" ...

  2. java中异常注意的细节2

    class A extends Exception{ A(){ super(); } A(String msg){ super(msg); } } class B extends A{ B(){ su ...

  3. Cwinux源码解析系列

      Cwinux源码解析系列

  4. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  5. Wee – 为现代 Web 开发打造的 CSS 脚手架

    Wee 包含许多开发人员在搭建响应的,互动的网站和应用程序时需要的组件.正如它的名字一样,Wee 是一个微小.移动优先的 CSS 复位框架.Wee 组织在一个简单的.可扩展的层次结构,拥有一致的样式和 ...

  6. 【Android】[转] Android中Bitmap,byte[],Drawable相互转化

    一.相关概念 1.Drawable就是一个可画的对象,其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable),还有可能是一个图层(LayerDrawable) ...

  7. oracle数据库字符集US7ASCII，在java中处理中文问题

    原来项目中oracle数据库一直是US7ASCII,我新项目对接的时候,查询以及插入中文,出现乱码问题. 暂时未能解决此问题,最终决定每次转码: 查询的时候: List<Record> l ...

  8. shell脚本专题之-----------全自动编译安装mysql

    mysql的编译安装,在博客 开源服务专题之--------mysql的编译安装 中已经说明了,但是还是比较麻烦,尤其是一大堆命令,来手动执行,稍有不慎,就会出错.生产上一般都是先在本地测试环境进行自 ...

  9. OpenStack虚拟云桌面在携程呼叫中心的应用

    编者:本文为刘科在第六期[携程技术微分享]中的分享内容.在携程技术中心(微信号ctriptech)微信后台回复[云桌面],可加入微信交流群,和关注云桌面的小伙伴一起玩耍~ 刘科,携程系统研发云平台桌面 ...

  10. 【转】NoSQL初探之人人都爱Redis：（2）Redis API与常用数据类型简介

    一.Redis API For .Net 首先,不得不说Redis官方提供了众多的API开发包,但是目前Redis官方版本不支持.Net直接进行连接,需要使用一些第三方的开源类库.目前最流行的就是Se ...