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. ios app 打包上传 app store（Application Loader）

    背景:使用Xcode 上传APP, 这个 有时候很慢,构建版本需要等很长时间,所以我推荐使用Application Loader 1.使用xocd 打包,导出.ipa文件 2. OK ,跟着上面做, ...

  2. OpenCascade Shape Representation in OpenSceneGraph

    OpenCascade Shape Representation in OpenSceneGraph eryar@163.com 摘要Abstract:本文通过程序实例,将OpenCascade中的拓 ...

  3. hibernate（七）组件映射与多对一映射

    一.组件映射 用注解配置组件映射: Husband为我们映射的类,wife是这个类的一部分(属性不能与husband中属性重名,不要写Entity注解,不要有主键) Husband类:(在getWif ...

  4. HTML学习目录

    前面的话 HTML被认为是前端知识体系里面最简单的知识,几年前,很多人都推荐在W3C上学习个几天就能够基本掌握.但随着HTML5和移动端的强势发展,HTML的技能点也越来越难.世上无难事,好学好总结. ...

  5. Ajax在IE浏览器会出现中文乱码解决办法

    在AJAX浏览器来进行发送数据时,一般它所默认的都是UTF-8的编码. Ajax在IE浏览器会出现中文乱码的情况!解决办法如下 <script type="text/javascrip ...

  6. tomcat本地部署war包的方式

    最近学习java,在本地tomcat部署时,主要采取以下方式: 一.本地构建生成war包 在本地项目中的terminal下,使用命令 “mvn clean install”或 先执行“mvn clea ...

  7. C#调用Couchbase中的Memcached缓存

    安装服务端 服务端下载地址:http://www.couchbase.com/download 选择适合自己的进行下载安装就可以了,我这里选择的是Win7 64. 服务端安装完后,如果成功了,那么在浏 ...

  8. 使用Html5+C#+微信 开发移动端游戏详细教程: （四）游戏中层的概念与设计

    众所周知,网站的前端页面结构一般是由div组成,父div包涵子div,子div包涵各种标签和项, 同理,游戏中我们也将若干游戏模块拆分成层,在后续的代码维护和游戏程序逻辑中将更加清晰和便于控制. We ...

  9. CentOS7 Nexus安装

    CentOS7 Nexus安装 CentOS7 Nexus安装 Download 从Nexus下载nexus-2.11.2-03-bundle.tar.gz Install 安装 上传RPM文件到/t ...

  10. Apache Kylin 部署之不完全指南

    1. 引言 Apache Kylin(麒麟)是由eBay开源的分布式分析引擎,提供Hadoop之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据.底层存储用的是HBase,数据输入与cu ...