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>

  

时间: 2024-10-12 16:31:36

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

jquery——九宫格大转盘抽奖

一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510p

js幸运大转盘开发

最终效果实例下载:http://www.oschina.net/code/snippet_2352644_54997 一.大转盘准备工作 网上的一个抽奖大转盘实例http://www.jq22.com/yanshi2252 这就是我们要开发的效果,不过我们是让指针转,我们先分析这个效果: 结构有2部分,上面是指针背景图,下面是奖项图 点击指针元素开始抽奖,会转动一定圈数停下来 停下来的位置指针指使那个奖项,就会弹出获奖信息提示 这是参考效果,我们分析自己的大概实现: 同样上下2部分 点击指针转动

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

在线抽奖程序在非常多站点上非常多,抽奖形式多种多样.Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖.结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源码作为分享.通过转动转盘指针来完毕抽奖的一种抽奖形式.依据旋转角度来控制指针停留的位置--幸运大转盘. 1.先来张幸运大抽奖效果图 2.Default.aspx页面代码 <!-- 很多其它技术分享请看博客:http://blog.csdn.net/fuyifang -->  <span

ECMALL FLASH幸运大转盘升级

大转盘新升级描述: 1.新修复一些bug 2.底层代码更优化 3.更方便API接口调用 ECMALL  FLASH幸运大转盘积分抽奖描述: 1:可以设置每个奖品的中奖概率,后台自由设置: 2:可以设置每个奖品的数量,当该奖品全部被抽出时不会再抽中此奖品,这样更好地预先制定奖品总额. 3:中奖公告内容设置,每个奖品的中奖后在中奖公告内显示出来: 4:抽奖程序与商城同步登录与退出,采用的为一个会员系统,更加无缝的结合在一起: 5:记录每个抽奖记录,无论管理员在后台还是会员在自己的管理中心均可以查看中

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

此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 鉴于初入前端之路,方法有限,仅供参考. 在网上找了很多拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是没找到点击按钮可以向两边贴边的拖拽,所以自己稍微修改了一点.代码如下: //签到按钮拖拽 var dragBox = document.getElementById('signCorner'); //拖拽中 dragBox.addEventListener('touch

【微信公众平台开发】微信幸运大转盘

需要js插件(下载包地址:http://download.csdn.net/detail/wyz365889/7798255): jquery jQueryRotate.2.2.js jquery.easing.min.js 前端显示代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name=

PHP幸运大转盘源码,支持ThinkPHP

原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之间的线,所以记为一等奖的最小角度为1°,最大角度为29°.同理可找出其他奖项的角度,这要注意,七等奖有6个. 然后呢,每个奖项都有不同的中奖概率,我们根据概率来获取奖项(概率可以设置为0,你懂的-),获取奖品后,在根据最大和最小角度生成一个随机数,来让指针旋转即可.. HTML代码 代码是基于thi

(素材源码)猫猫学iOS(四十六)之网易彩票幸运大转盘

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 素材源码地址:http://download.csdn.net/detail/u013357243/8713827 效果 代码: NYWheel NYWheel.h // // NYWheel.h // 网易彩票幸运大转盘 // // Created by apple on 15-5-18. // Copyright (c)

幸运大转盘-jQuery+PHP实现的抽奖程序

原文  https://www.helloweba.com/view-blog-215.html 准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div class="demo">     <div id="disk"></div>     <div id="start"&