jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
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抽奖程序的简单实现的更多相关文章
- jQuery幸运大转盘_jQuery+PHP抽奖程序
http://www.thinkphp.cn/code/1153.html 网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序. 若是想看更多js特效.网站源码. ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- jquery——九宫格大转盘抽奖
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...
- PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...
- asp.net+jQueryRotate开发幸运大转盘
在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...
- PHP幸运大转盘源码,支持ThinkPHP
原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之 ...
- html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
- Vue 幸运大转盘
转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不 ...
- 跟我一起学编程—《Scratch编程》第24课:幸运大转盘
同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...
随机推荐
- MySQL(四) 数据表的插入、更新、删除数据
序言 数据表的插入.更新.删除非常简单,但是简单的也要学习,细节决定成败. ---WH 一.插入数据 格式:INSERT INTO 表名(字段名...)VALUES(值...); 创建环境 使用per ...
- Linux快速入门01-基础概念
4年多前,刚到上海时报过一个关于Oracle的培训班,在那里接触到了Linux,不过一直都没真正去试着使用它.现在经过慢慢的成长,越来越觉得,Linux是每一个服务端工程师必须掌握的系统,即使是现在最 ...
- TSQL Merge 用法
在更新数据仓库时,经常需要根据源表对Target表进行数据同步,Merge 命令具有数据更新,删除,插入的功能,专门用于数据同步,并将数据的更新输出到表中.在使用Merge命令时,需要注意when n ...
- 因为相同类型的其他实体已具有相同的主键值。在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 。。。
因为相同类型的其他实体已具有相同的主键值.在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified&quo ...
- Ext.grid.CheckboxSelectionModel状态设置
直接上代码: var model = grid.getSelectionModel(); model.selectAll();//选择所有行 model.selectFirstRow();//选择第一 ...
- Spark入门实战系列--2.Spark编译与部署(上)--基础环境搭建
[注] 1.该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取: 2.Spark编译与部署将以CentOS 64位操作系统为基础,主要是考虑到实际应用 ...
- Tridiv:基于 Web 的 CSS 编辑器,创建炫丽 3D 图形
Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...
- Android通过xml文件配置数据库
之前一段时间自己封装了两个数据库,一个是ORM数据库,另一个是事件流数据库,项目相应的地址如下: ORM数据库:https://github.com/wenjiang/SimpleAndroidORM ...
- bash魔法堂:History用法详解
Brief 又要敲那条长到没朋友的命令了,真心不再爱了... 有了history这条命令我想大家可以再爱一次了吧! >history 语法: history [n | -c | -raw his ...
- CSS3魔法堂:认识@font-face和Font Icon
一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...