实例介绍
【实例简介】转盘抽奖 适用于 360 firefox chrome safari opera 遨游 搜狗等浏览器，暂不支持ie8 世界之窗
【实例截图】
【核心代码】
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery圆盘抽奖特效代码 </title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqueryui/jqueryui.css" />
<style>
body {
background:url('img/turnplate/bg_01.jpg') top center no-repeat #fff;
font:Arial,Helvetica,sans-serif;
}
#header {
width:960px;
margin:0 auto;
position:relative;
}
#turnplatewrapper {
height:592px;
width:592px;
background:url('img/turnplate/plate_06.png') top left no-repeat;
/*_background:url('img/turnplate/plate_06_8.png') top left no-repeat;*/
left:200px;
top:20px;
position:absolute;
-moz-user-select:none;
user-select:none;
}
#turnplate {
height:592px;
width:592px;
background:url('img/turnplate/plate_05.png') top left no-repeat;
/*_background:url('img/turnplate/plate_05_8.png') top left no-repeat;*/
}
#turnplate #awards {
position:absolute;
width:100%;
height:100%;
background:url('img/turnplate/plate_03.png') top left no-repeat;
/*_background:url('img/turnplate/plate_03_8.png') top left no-repeat;*/
}
#platebtn {
position:absolute;
top:218px;
left:218px;
background:url('img/turnplate/plate_04.png') top left no-repeat;
/*_background:url('img/turnplate/plate_04_8.png') top left no-repeat;*/
height:155px;
width:155px;
cursor:pointer;
}
#platebtn.hover {
background-position:0 -155px
}
#turnplate #platebtn.click {
background-position:0 -310px
}
#gift {
width:398px;
height:89px;
background:url('img/turnplate/plate_gift_01.png') top left no-repeat;
/*_background:url('img/turnplate/plate_gift_01_8.png') top left no-repeat;*/
position:absolute;
left:90px;
top:720px;
}
#msg {
position:absolute;
display:none;
top:130px;
left:195px;
border-radius:5px;
color:#333;
border:3px solid #FED33f;
box-shadow:2px 2px 2px rgba(0,0,0,0.6);
background:#fffcf2;
width:200px;
padding:10px;
text-align:center;
}
#content {
width:960px;
margin:0 auto;
}
#init {
position:absolute;
top:50%;
left:50%;
width:100px;
height:30px;
border-radius:5px;
color:#333;
border:3px solid #FED33f;
box-shadow:2px 2px 2px rgba(0,0,0,0.6);
background:#fffcf2;
width:250px;
padding:10px;
margin-top:-30px;
margin-left:-138px;
text-align:center;
opacity:0.9;
filter:alpha(opacity=90);
}
#login {
margin-left:20px;
}
#login .tips {
margin-left:50px;
font-size:12px;
margin-bottom:-5px;
}
#login .tips a {
color:#039;
font-size:16px;
text-decoration:underline;
}
#login .tips a:hover {
}
#login .msg {
color:red;
}
#login label {
height:30px;
line-height:30px;
font-size:16px;
}
#login .ipt {
background:#fff;
border:1px solid #ccc;
height:28px;
line-height:28px;
margin-bottom:10px;
box-shadow:0 1px 0 #fff;
border-radius:2px;
width:200px;
}
#login .ipt:focus {
box-shadow:0 0 3px rgba(86,180,289,0.3);
border:1px solid #56b4ef;
}
#lotteryMsg {
}
#lotteryMsg .msg {
font-size:16px;
color:red;
font-weight:bold;
text-align:center;
font-size:26px;
color:#ba0f54;
line-height:1;
margin-bottom:10px;
}
#lotteryMsg .tips {
text-align:center;
font-size:14px;
}
#lotteryMsg .sp {
border-top:1px solid #c3c3c3;
border-bottom:0 none transparent;
border-right:0 none transparent;
border-left:0 none transparent;
overflow:hidden;
height:0;
margin:10px 0;
}
#lotteryMsg a {
color:#138cbe;
}
#lotteryMsg a:hover {
color:#039;
}
#lotteryMsg .content {
border:1px solid #ccc;
border-radius:5px;
padding:10px;
background:#fff;
line-height:1.5;
}
#top-menu-wrapper {
height:51px;
background:url('img/turnplate/bg_02.png') top center repeat-x;
margin-bottom:-51px;
}
#top-menu {
width:960px;
margin:0 auto;
}
#top-menu a, #top-menu span {
line-height:50px;
display:inline-block;
font-size:16px;
color:#fff;
text-decoration:1px 1px 2px rgba(0, 0, 0, 0.3);
}
#top-menu .user {
padding-left:30px;
display:inline-block;
height:50px;
color:#fff;
background:url('img/turnplate/bg_03.png') 0 16px no-repeat;
}
</style>
<style>
/*jquery ui 定制 */
body .ui-dialog {
padding:0px;
background:#ebeae3;
box-shadow:2px 2px 5px rgba(0,0,0,0.5);
}
body .ui-dialog .ui-dialog-titlebar {
height:23px;
padding:0;
margin:0;
background:none;
border:0 none transparent;
}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-title {
display:none;
}
body .ui-widget-content {
border:4px solid #F7D102;
}
body .ui-dialog .ui-dialog-titlebar-close {
background:#f6d20d;
right:0;
margin-top:-12px;
}
body .ui-dialog .ui-dialog-buttonpane {
border:0 none transparent;
}
body .ui-dialog .ui-button-text {
padding:0.8em 1em;
}
body .ui-widget-overlay {
background:url('img/turnplate/bg_04.png');
_filter:alpha(opacity=60);
}
.mv5 {
margin-left:5px;
margin-right:5px;
}
</style>
</head>
<div id="top-menu-wrapper" class="dn bgfix">
<div id="top-menu">
<div class="l"><a class="user bgfix" href="http://www.ablanxue.com/"> </a> <span>（今天还有</span><span class="lottery-times">0</span><span>次抽奖机会）</span></div><a class="logout r" href="http://www.ablanxue.com/">退出</a>
</div>
</div>
<div id="header">
<div id="turnplatewrapper" onselectstart="return false;" class="bgfix">
<div id="turnplate" class="bgfix">
<div id="awards" class="bgfix">
</div>
<div id="platebtn" class="bgfix">
</div>
<p id="msg">
</p>
<p id="init" class="dn">
初始化中，请稍后<span></span>
</p>
</div>
</div>
<div id="gift" class="bgfix">
</div>
</div>
<div id="content">
</div>
<div id="lotteryMsg" class="dn">
<p class="msg"></p>
<p class="tips">中奖空间已自动添加到您的快盘帐号中，<a href="http://www.ablanxue.com/" target="_blank">点击查看</a>。</p>
<hr class="sp" />
<p class="mv5" style="margin-bottom:5px">发送以下内容到新浪微博，还可额外获得5M永久空间哦！</p>
<div class="content mv5">
“幸运大转盘，快盘送空间” <span class="option"></span>每日大转盘摇奖，轻松扩容，惊喜不断，抢100G永久空间点击->http://www.ablanxue.com/ 同步网盘领军产品，4500万用户的选择，值得信赖。
</div>
</div>
<!--新登录注册弹框-->
<div id="new-login" class="dn">
</div>
<body>
<!--
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.bgfix');
</script>
-->
<!---->
<script>
//新登录
$('#new-login').dialog({
modal: true,
width:400,
heigth:220,
resizable: false,
autoOpen: false,
title: '请先登录'
});
</script>
<script>
var isLogin = false;
</script>
<script>
var turnplate = {
turnplateBox : $('#turnplate'),
turnplateBtn : $('#platebtn'),
lightDom : $('#turnplatewrapper'),
freshLotteryUrl : 'http://huodong.kuaipan.cn/ajaxTurnplate/freshLottery/',
msgBox : $('#msg'),
lotteryUrl : 'http://huodong.kuaipan.cn/ajaxTurnplate/lottery/',
height : '592', //帧高度
lightSwitch : 0, //闪灯切换开关. 0 和 1间切换
minResistance : 5, //基本阻力
Cx : 0.01, //阻力系数 阻力公式： totalResistance = minResistance curSpeed * Cx;
accSpeed : 15, //加速度
accFrameLen : 40, //加速度持续帧数
maxSpeed : 250, //最大速度
minSpeed : 20, //最小速度
frameLen : 10, //帧总数
totalFrame : 0, //累计帧数,每切换一帧次数加1
curFrame : 0, //当前帧
curSpeed : 20, //上帧的速度
lotteryTime : 0, //抽奖次数
lotteryIndex : 6, //奖品index
errorIndex : 6, //异常时的奖品指针
initBoxEle : $('#turnplate #init'),
progressEle : $('#turnplate #init span'),
initProgressContent : '~~~^_^~~~', //初始化进度条的内容
initFreshInterval : 500, //进度条刷新间隔
virtualDistance : 10000, //虚拟路程,固定值，速度越快，切换到下帧的时间越快: 切换到下帧的时间 = virtualDistance/curSpeed
isStop : false, //抽奖锁,为true时，才允许下一轮抽奖
timer2 : undefined, //计时器
initTime : undefined,
showMsgTime : 2000, //消息显示时间
lotteryChannel: '',
channelList: {
'login': '每日登录',
'consume': '购买空间'
},
lotteryType : {
'5M' : 0,
'80M' : 1,
'1G' : 2,
'200M' : 3,
'100M' : 4,
'20M' : 5,
'empty' : 6,
'10G' : 7,
'50M' : 8,
'1T' : 9
},
lotteryList : [
'5M 永久空间',
'80M 永久空间',
'1G 永久空间',
'200M 永久空间',
'100M 永久空间',
'20M 永久空间',
'继续攒人品',
'10G 永久空间',
'50M 永久空间',
'1T 永久空间',
],
lotteryDes : [
'手气一般般，幸运指数半颗星！',
'手气不错呢，幸运指数3颗星！',
'手气无敌了，幸运指数4颗星！',
'手气很好呢，幸运指数3颗星！',
'手气很好呢，幸运指数3颗星！',
'手气还凑合，幸运指数1颗星！',
'手气太差了，幸运指数0颗星！',
'手气太好了，幸运指数5颗星！',
'手气还可以，幸运指数2颗星！',
'手气爆棚了，幸运指数5颗星！'
],
//初始化
init : function() {
this.initAnimate()
this.freshLottery();
this.turnplateBtn.click($.proxy(function(){
this.click();
},this));
},
//初始化动画
initAnimate : function() {
this.initBoxEle.show();
clearTimeout(this.initTimer);
var curLength = this.progressEle.text().length,
totalLength = this.initProgressContent.length;
if (curLength < totalLength) {
this.progressEle.text(this.initProgressContent.slice(0, curLength 1));
}else{
this.progressEle.text('');
}
this.initTimer = setTimeout($.proxy(this.initAnimate, this), this.initFreshInterval);
},
//停止初始化动画
stopInitAnimate : function() {
clearTimeout(this.initTimer);
this.initBoxEle.hide();
},
freshLotteryTime : function() {
$('#top-menu').find('.lottery-times').html(this.lotteryTime);
},
//更新抽奖次数
freshLottery : function() {
this.stopInitAnimate();
this.setBtnHover();
this.isStop = true;
this.lotteryTime = 1;
this.freshLotteryTime();
},
//设置按钮三态
setBtnHover : function() {
//按钮三态
$('#platebtn').hover(function(){
$(this).addClass('hover');
},function() {
$(this).removeClass('hover click');
}).mousedown(function(){
$(this).addClass('click');
}).mouseup(function(){
$(this).removeClass('click');
});
},
//获取奖品
lottery : function() {
this.lotteryIndex = undefined;
this.lotteryTime--;
this.freshLotteryTime();
this.totalFrame = 0;
this.curSpeed = this.minSpeed;
this.turnAround();
this.lotteryIndex = typeof this.lotteryType[2] !== 'undefined' ? this.lotteryType[2] : this.errorIndex;
this.lotteryChannel = typeof this.channelList[1] !== 'undefined' ? this.channelList[1] : '';
},
//点击抽奖
click : function() {
//加锁时
if(this.isStop == false) {
this.showMsg('现在还不能抽奖哦');
return;
}
this.lottery();
},
//更新当前速度
freshSpeed : function() {
var totalResistance = this.minResistance this.curSpeed * this.Cx;
var accSpeed = this.accSpeed;
var curSpeed = this.curSpeed;
if(this.totalFrame >= this.accFrameLen) {
accSpeed = 0;
}
curSpeed = curSpeed - totalResistance accSpeed;
if(curSpeed < this.minSpeed){
curSpeed = this.minSpeed;
}else if(curSpeed > this.maxSpeed){
curSpeed = this.maxSpeed;
}
this.curSpeed = curSpeed;
},
//闪灯,切换到下一张时调用
switchLight : function() {
this.lightSwitch = this.lightSwitch === 0 ? 1 : 0;
var lightHeight = -this.lightSwitch * this.height;
this.lightDom.css('backgroundPosition','0 ' lightHeight.toString() 'px');
},
//旋转,trunAround,changeNext循环调用
turnAround : function() {
//加锁
this.isStop = false;
var intervalTime = parseInt(this.virtualDistance/this.curSpeed);
this.timer = window.setTimeout('turnplate.changeNext()', intervalTime);
},
//弹出奖品
showAwards : function(){
$('#lotteryMsg').dialog('open');
},
//显示提示信息
showMsg : function(msg, isFresh) {
isFresh = typeof isFresh == 'undefined' ? false : true;
if(typeof msg != 'string'){
msg = '今天已经抽过奖了，明天再来吧';
}
var msgBox = this.msgBox;
var display = msgBox.css('display');
msgBox.html(msg);
window.clearTimeout(this.timer2);
msgBox.stop(true,true).show();
var fadeOut = $.proxy(function() {
this.msgBox.fadeOut('slow');
}, this);
this.timer2 = window.setTimeout(fadeOut, this.showMsgTime);
},
//切换到下帧
changeNext : function() {
//判断是否应该停止
if(this.lotteryIndex !== undefined && this.curFrame == this.lotteryIndex && this.curSpeed <= this.minSpeed 10 && this.totalFrame > this.accFrameLen) {
this.isStop = true;
this.showAwards();
return;
}
var nextFrame = this.curFrame 1 < this.frameLen ? this.curFrame 1 : 0;
var bgTop = - nextFrame * this.height;
this.turnplateBox.css('backgroundPosition','0 ' bgTop.toString() 'px');
this.switchLight();
this.curFrame = nextFrame;
this.totalFrame ;
this.freshSpeed();
this.turnAround();
}
}
</script>
<script>
//登录插件
(function($){
$.fn.login = function(options){
settings = {
loginUrl: 'account/login/',
msgEle: $(this).find('.msg'),
loginIdEle: $(this).find('#loginId'),
passwordEle: $(this).find('#password')
};
var ERROR_MSG = {
'inputCorrectEmail': '请输入正确的用户名',
'inputPassword': '请填写登录密码',
'passwordLength': '密码应在6-32位字符内',
'noreg': '此账号未注册',
'checkemailcode_2':'此账号未注册',
'checkemailcode_':'服务器繁忙，请稍后再试',
'accountNotMatch': '账号密码不匹配',
'serverdown': '服务器维护中',
'clientUserBaned': '您的账号被限制登录',
'accUserInvalid': '正在对该账号进行绑定处理，暂无法登陆',
'userLocked': '帐号锁定中，暂时无法登录',
'inviladId': '帐号不存在'
}
function submit() {
var loginId = $.trim(settings.loginIdEle.val()),
password = $.trim(settings.passwordEle.val());
if(loginId == '') {
showMsg('登录名不能为空');
return;
}
if(password == '') {
showMsg('密码不能为空');
return;
}
$.post(settings.loginUrl, {'loginId': loginId, 'password': password}, function(data){
if(data.status == 'ok') {
location.reload();
} else {
if(typeof ERROR_MSG[data.status] == 'string') {
showMsg(ERROR_MSG[data.status]);
} else {
showMsg('服务器维护中');
}
}
}, 'json');
}
function showMsg(msg) {
settings.msgEle.html(msg);
}
if(typeof options == 'string'){
switch(options) {
case 'submit':
submit();
break;
default:
}
}
return $(this);
}
})(jQuery);
$('#lotteryMsg').dialog({
modal: true,
width: 500,
height: 350,
resizable: false,
title: '获奖信息',
autoOpen: false,
open: function(){
var showMsg = '您抽中了： ' turnplate.lotteryList[turnplate.lotteryIndex] /* ' (来自:' turnplate.lotteryChannel ')'*/;
var options = '今天抽中了' turnplate.lotteryList[turnplate.lotteryIndex] '，' turnplate.lotteryDes[turnplate.lotteryIndex];
$('#lotteryMsg').find('.msg').html(showMsg);
$('#lotteryMsg').find('.option').html(options);
},
buttons: [{
text:'发微博领5M空间',
click: function() {
var options = '今天抽中了' turnplate.lotteryList[turnplate.lotteryIndex] '，' turnplate.lotteryDes[turnplate.lotteryIndex];
var jumpUrl = "http://www.ablanxue.com";
window.open(jumpUrl, "top", "width=1024,height=750,menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1");
$(this).dialog('close');
}
}]
});
$('#login').dialog({
modal: true,
width: 350,
resizable: false,
title: '请先登录',
autoOpen: false,
open: function(){
//监听回车事件
$('#login').bind('keydown', function(e){
if(e.which == '13'){
$('#login').login('submit');
}
});
},
close: function(){
//取消监听
$('#login').unbind('keydown');
$('#login #password').val('');
},
buttons:[{
text: '登录',
click: function(){
$('#login').login('submit');
}
}]
});
turnplate.init();
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、世界之窗。</p>
</div>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论