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音乐代码，希望大家可以喜欢。
相关推荐
-
jQuery+PHP实现微信转盘抽奖功能的方法
本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div class="demo"> <div id="disk"></div> <div
-
使用jQuery Rotare实现微信大转盘抽奖功能
很多公司到了年底都会做一些抽奖活动来刺激.吸引.粘住客户,比如抽奖转盘活动. 前几天用一个jqueryRotate插件实现了转盘的效果.比起那些很炫丽的flash是稍逊点,但也基本实现了需求 效果图: 实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .S
-
jquery实现九宫格大转盘抽奖
下面我们来分享一个九宫格抽奖特效 特效说明: 一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置.奖品数量.转动次数.中奖位置参数.(兼容测试:IE7及以上.Firefox.Chrome.Opera.Safari.360等主流浏览器) HTML: <!--效果html开始--> <div id="lottery"> <table border="0" cellpadding="0&q
-
jquery实现转盘抽奖功能
实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现 google code地址:http://code.google.com/p
-
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:510
-
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效源码是一款基于jQuery,点击大转盘开始抽奖可抽到绿钻的仿qq音乐抽奖转盘的代码. 运行效果图:---------------------------------------效果查看 源码下载-------------------------------------- 为大家分享的jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效代码如下 <head> <meta http-equiv="Content-Type" co
-
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:510
-
jQuery Ajax 异步加载显示等待效果代码分享
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques
-
jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述: 注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果: 首先检测手机是否符合1开头,11位数字的格式: 若不符合,则提示错误信息并返回false: 否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: --------------------------------效果演
-
jQuery满屏焦点图左右滚动特效代码分享
本文实例讲述了jQuery横向擦除焦点图特效.分享给大家供大家参考.具体如下: jQuery焦点图是一款满屏左右滚动,带左右按钮,带缩略图,支持自动轮播的焦点图代码. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery满屏焦点图左右滚动特效代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
-
jquery实现select下拉框美化特效代码分享
这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码. 为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&
-
jQuery右侧选项卡焦点图片轮播特效代码分享
本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码.分享给大家供大家参考.具体如下: jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击. 运行效果图: ----------------------查看效果-源码下载---------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下 <!DOCTYPE html PUBLIC "-
-
jquery带下拉菜单和焦点图代码分享
jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码.感兴趣的朋友快来学习学习吧 运行效果图: ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery带下拉菜单和焦点图如下 <head> <meta http-equiv="Content-Type"
-
Android调用第三方QQ登录代码分享
本文为大家分享了调用QQ登录的相关代码,希望对大家有帮助,减少项目开发的时间,具体内容如下 1.去QQ开放平台注册帐号(http://open.qq.com/),为应用申请QQ的APP_ID , 并下载相关的jar包,放到工程的lib目录下. 2.在Manifest.xml里注册QQ相关的Activity,代码如下 <activity android:name="com.tencent.connect.common.AssistActivity" android:screenOr
-
jquery实现预览提交的表单代码分享
预览表单,查看后确认提交或者返回重填 XML/HTML Code 复制代码 代码如下: <form class="mform" id="myform" method="POST" id="myform" action=""> <fieldset> <legend>Registeration</legend> <table c