jQuery实现大转盘抽奖活动仿QQ音乐代码分享


Posted in Javascript onAugust 21, 2015

jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效源码是一款基于jQuery,点击大转盘开始抽奖可抽到绿钻的仿qq音乐抽奖转盘的代码。

运行效果图:---------------------------------------效果查看 源码下载--------------------------------------

jQuery实现大转盘抽奖活动仿QQ音乐代码分享

为大家分享的jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿QQ音乐jQuery抽奖转盘代码</title>

<style type="text/css">
* { margin: 0; padding: 0;}
body { font-family: "Microsoft Yahei"; background-color: #15734b;}
h1 { width: 900px; margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center; color: #fff;}
.dowebok { width: 894px; height: 563px; margin: 0 auto; background-image: url(images/s3_bg.png);}
.rotary { position: relative; float: left; width: 504px; height: 504px; margin: 20px 0 0 20px; background-image: url(images/g.png);}
.hand { position: absolute; left: 144px; top: 144px; width: 216px; height: 216px; cursor: pointer;}
.list { float: right; width: 300px; padding-top: 44px;}
.list strong { position: relative; left: -45px; display: block; height: 65px; line-height: 65px; font-size: 32px; color: #ffe63c;}
.list h4 { height: 45px; margin: 30px 0 10px; line-height: 45px; font-size: 24px; color: #fff;}
.list ul { line-height: 36px; list-style-type: none; font-size: 12px; color: #fff;}
.list span { display: inline-block; width: 94px;}
</style>

</head>

<body>
<h1>仿QQ音乐抽奖转盘</h1>
<div class="dowebok">
 <div class="rotary">
 <img class="hand" src="images/z.png" alt="">
 </div>
 <div class="list">
 <strong>100%中奖</strong>
 <h4>中奖用户名单</h4>
 <ul>
 <li>
 <span>154**88</span> <span>获得1个月绿钻</span>
 </li>
 <li>
 <span>6161***034</span> <span>获得11个月绿钻</span>
 </li>
 <li>
 <span>2349***224</span> <span>获得1个月绿钻</span>
 </li>
 <li>
 <span>433***54</span> <span>获得2个月绿钻</span>
 </li>
 <li>
 <span>5154***234</span> <span>获得4个月绿钻</span>
 </li>
 <li>
 <span>3213***123</span> <span>获得2个月绿钻</span>
 </li>
 <li>
 <span>898****362</span> <span>获得9个月绿钻</span>
 </li>
 </ul>
 </div>
</div>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.rotate.min.js"></script>
<script>
$(function(){
 var $hand = $('.hand');

 $hand.click(function(){
 var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 data = data[Math.floor(Math.random()*data.length)];
 switch(data){
 case 1:
 rotateFunc(1,16,'恭喜你抽中了1个月绿钻');
 break;
 case 2:
 rotateFunc(2,47,'恭喜你抽中了2个月绿钻');
 break;
 case 3:
 rotateFunc(3,76,'恭喜你抽中了3个月绿钻');
 break;
 case 4:
 rotateFunc(4,106,'恭喜你抽中了4个月绿钻');
 break;
 case 5:
 rotateFunc(5,135,'恭喜你抽中了5个月绿钻');
 break;
 case 6:
 rotateFunc(6,164,'恭喜你抽中了6个月绿钻');
 break;
 case 7:
 rotateFunc(7,193,'恭喜你抽中了7个月绿钻');
 break;
 case 8:
 rotateFunc(7,223,'恭喜你抽中了8个月绿钻');
 break;
 case 9:
 rotateFunc(7,252,'恭喜你抽中了9个月绿钻');
 break;
 case 10:
 rotateFunc(7,284,'恭喜你抽中了10个月绿钻');
 break;
 case 11:
 rotateFunc(7,314,'恭喜你抽中了11个月绿钻');
 break;
 case 12:
 rotateFunc(7,345,'恭喜你抽中了12个月绿钻');
 break;
 }
 });

 var rotateFunc = function(awards,angle,text){
 $hand.stopRotate();
 $hand.rotate({
 angle: 0,
 duration: 5000,
 animateTo: angle + 1440,
 callback: function(){
 alert(text);
 }
 });
 };
});
</script>


</body>
</html>

以上就是jQuery实现大转盘抽奖活动仿QQ音乐代码,希望大家可以喜欢。

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
详解Javascript继承的实现
Mar 25 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
js变形金刚文字特效代码分享
Aug 20 #Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 #Javascript
JS实现的通用表单验证插件完整实例
Aug 20 #Javascript
jquery Easyui快速开发总结
Aug 20 #Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 #Javascript
js实现按钮颜色渐变动画效果
Aug 20 #Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 #Javascript
You might like
php,不用COM,生成excel文件
2006/10/09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
dedecms中使用php语句指南
2014/11/13 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
javascript multibox 全选
2009/03/22 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python中的reduce内建函数使用方法指南
2014/08/31 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python简单读取json文件功能示例
2017/11/30 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
python实现局域网内实时通信代码
2019/12/22 Python
Python面向对象实现方法总结
2020/08/12 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
高中班主任评语大全
2014/04/25 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
学生犯错保证书
2015/05/09 职场文书
大学副班长竞选稿
2015/11/21 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js
浅谈Redis的事件驱动模型
2022/05/30 Redis