<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>公司年会·抽奖</title>
<style>
html, body {
height: 100%;
}
body {
background-size: 100%;
margin: 0;
font-family: Helvetica, sans-serif;;
overflow: hidden;
}
/* .background{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -99;
background: url(./img/lottery.jpg) no-repeat;
background-size: 101%;
} */
a {
color: #ffffff;
}
#info {
position: absolute;
width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
font-weight: bold;
text-align: center;
z-index: 1;
}
#menu {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.element {
width: 100px;/* 120 160 */
height: 100px;
box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
border: 1px solid rgba(127,255,255,0.25);
text-align: center;
cursor: default;
}
.element:hover {
box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
border: 1px solid rgba(127,255,255,0.75);
}
.element img{
width:100px;
height:100px;
}
.element .number {
position: absolute;
top: 20px;
right: 20px;
font-size: 12px;
color: rgba(127,255,255,0.75);
}
.element .symbol {
position: absolute;
top: 40px;
left: 0px;
right: 0px;
font-size: 60px;
font-weight: bold;
color: rgba(255,255,255,0.75);
text-shadow: 0 0 10px rgba(0,255,255,0.95);
}
.element .details {
position: absolute;
bottom: 15px;
left: 0px;
right: 0px;
font-size: 12px;
color: rgba(127,255,255,0.75);
}
button {
background: transparent;
border: 0px;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: rgba(0,255,255,0.5);
}
button:active {
color: #000000;
background-color: rgba(0,255,255,0.75);
}
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.show_info{position:fixed;background-color:rgba(0,0,0,.6);padding:10px;width:300px;margin:0 auto;left: 0;right:0;border-radius: 5px;box-shadow: 0 0 10px 0 #fff;top:30%;}
.show_info img{display:block;margin:auto;border-radius: 5px;box-shadow: 0 0 10px 0 #888;}
.show_info .intro{color:#fff;text-indent:20px;margin-top:10px;height:65px;overflow:hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.show_info .info_my{text-align: center;}
.show_info .info_my > *{display:inline-block !important;vertical-align: middle;}
.show_info .info_my .info_mem{color:#fff;max-width:120px;}
.show_info .info_my .info_mem > div{text-align: left;}
.show_info .info_my .info_mem > div.nickname{max-width: 120px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
</style>
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="data.js"></script>
<script src="js/three.min.js"></script>
<script src="js/tween.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/CSS3DRenderer.js"></script>
<a id="clear-control" href="javascript:;" data-open="1"></a>
<!--音乐开关-->
<!-- <a id="music-control" class="animated infinite bounce" href="javascript:;" data-open="1"></a>
<audio id="music" loop="loop" autoplay="autoplay" preload="auto" src="https://music.163.com/song?id=395153&userid=568868131">
你的浏览器不支持audio标签
</audio> -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=395153&auto=1&height=66"></iframe>
<div id="container"></div>
<div id="info"></div>
<!--抽奖按钮-->
<div class="dashboard">
<span>输入中奖人数：</span><input type="number" class="number" />
<button class="submit" id="lottery-btn" data-id="0">开始抽奖</button>
</div>
<!-- <div id="menu">
<button id="table"></button>
<button id="sphere"></button>
<button id="helix"></button>
<button id="grid"></button>
</div> -->
<div class="winThePrize">
<ul>
</ul>
</div>
<canvas id="canvas"></canvas>
<script src="./js/canvas.js"></script>
<script src="./js/huaCanvas.js"></script>
<script>
var personArray = JSON.parse(localStorage.getItem('lottery_initial'));
var CurPersonNum = 0;
var speed = 0 ;
var Alert = {
//确认
showMsg:function(obj){
var subhtml='<div id="alert_dialog_show_msg_box" style=" overflow:hidden;height:100px;width:200px;margin:15% auto;"><div class="sweet-overlay" tabIndex="-1" style=" background-color:#000; opacity:0.4; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index:1000;"></div><div id="alert_show_3" style="height:100px; width:200px; background-color:#fff; color:#000; border-radius:8px;font-size:20px; text-align:center;z-index:2000;position:absolute;"><p style="font-size:14px; margin-top:20px;">'+obj+'</p><input name="button" onclick="closedShowMsg()" type="button" value="确认" style=" width:60px; height:30px; line-height:30px;" /></div></div>';
$("body").append(subhtml);
},
showConfirmMsg:function(obj,callback){
var subhtml='<div id="alert_dialog_show_confirm_box" style=" overflow:hidden;height:100px;width:200px;margin:15% auto;"><div class="sweet-overlay" tabIndex="-1" style=" background-color:#000; opacity:0.4; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index:1000;"></div><div id="alert_show_3" style="height:100px; width:200px; background-color:#fff; color:#000; border-radius:8px;font-size:20px; text-align:center; position:absolute;z-index:2000;"><p style="font-size:14px; margin-top:20px;">'+obj+'</p><input name="button" onclick="rec('+callback+')" type="button" value="确认" style=" width:60px; height:30px;line-height:30px;" /><input name="button" onclick="rec()" type="button" value="取消" style=" width:60px; height:30px;line-height:30px;" /></div></div>';
$("body").append(subhtml);
callback = callback || function(){};
},
}
//关闭确认弹出框
function rec(callback){
$("#alert_dialog_show_confirm_box").remove();
callback();
}
//关闭弹出框
function closedShowMsg(){
$("#alert_dialog_show_msg_box").remove();
}
// animate
var _in = ['bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','slideInDown','slideInLeft','slideInRight'];
var _out = ['bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','slideOutDown','slideOutLeft','slideOutRight'];
// 生成虚拟数据
// 由于懒得添加数据，多循环几次效果更好，100人左右效果最好
var newArr = new Array;
for(var j=0;j<7;j++){
for(var i=0; i<personArray.length; i++){
newArr.push(personArray[i])
}
}
lottery.zip （15个子文件） 
lottery js 
tween.min.js 5KB jquery.min.js 91KB canvas.js 5KB three.min.js 499KB TrackballControls.js 14KB CSS3DRenderer.js 7KB huaCanvas.js 10KB css css.css 4KB animate.min.css 55KB
index.html 25KB img 
iptback.png 468B avatar 
mini.jpg 25KB clear.png 2KB award_0.png 54KB data.js 6KB资源评论
hbx19822021-01-21刚下载了，很酷！要是抽奖时有个抽奖过程的动态效果就更好了。
weixin_42439615
- 粉丝: 3
最新资源
- 电子商务与企业发展的研究--毕业设计论文(1).doc
- 借助人工智能推进社会治理现代化(1).docx
- 办公软件培训计划(1).docx
- 社区服务业的电子商务分析论文(1).docx
- 基于互联网+的中职数学改革新方向探究(1).docx
- 儿童编程软件Scratch的选择题和判断题集锦(1).doc
- 品茗二代施工资料软件.doc
- 论互联网金融时代的商业银行转型DYLW.NET(1).docx
- 深究电子商务节约流通费用(1).docx
- 某软件产业基地基础设施综合开发项目可行性研究报告(1)(1).doc
- 信息化环境下幼儿的自主生活化策略(1).docx
- 电子商务方案的设计(1).doc
- Excel表格通用模板：末位淘汰考核表格(1).xls
- 密码技术在计算机网络安全中的应用研究-1(1).docx
- 互联网+教育辅助应用于小学语文教学的思考(1).docx
- 关于大力发展电子商务物流基础设施的提案(1).doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
