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 相关文章推荐
jQuery实现动画效果的实例代码
May 07 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP 采集心得技巧
2009/05/15 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
Javascript继承机制详解
2017/05/30 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
js中this对象用法分析
2018/01/05 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python统计cpu利用率的方法
2015/06/02 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
比赛口号大全
2014/06/10 职场文书
街道社区活动报告
2015/02/05 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python