jquery年会大屏抽奖效果代码
代码语言:html
所属分类:其他
代码描述:jquery年会大屏抽奖效果代码,手动开始和结束
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
*{
margin:0;
padding:0;
}
.box{
width:100%;
text-align:center;
/*position: absolute;*/
vertical-align: middle;
height: 100%;
margin: 4% auto 0 auto!important;
}
.lucky-list-outer {
width: 90%;
max-width: 300px;
background: #ffffff;
overflow: hidden;
margin: 0 auto;
min-height: 300px;
height: 100%;
}
.list {
height: 80%;
overflow: auto;
}
video{
position: fixed;
right: 0px;
bottom: 0px;
object-fit:fill;
/*min-width: 100%;*/
/*min-height: 100%;*/
height: 100%;
width: 100%;
/*加滤镜*/
/*-webkit-filter: grayscale(100%);*/
/*filter:grayscale(100%);*/
}
source{
/*min-width: 100%;*/
/*min-height: 100%;*/
height: 100%;
width: 100%;
}
.show-outer {
height: 100%;
min-height: 85vh;
vertical-align: middle;
}
.action-outer {
cursor: pointer;
position: fixed;
z-index: 1;
width: 100%;
top: 0;
}
.btns {
padding-top: 10px !important;
}
.show-actions {
max-height: 114px;
transition: max-height .5s ease-in;
transform-origin: 50% 0;
animation: slide-down 0.5s ease-in;
-webkit-animation: slide-down 0.5s ease-in;
}
.hidden-actions {
max-height: 0;
overflow: hidden;
z-index: -10;
transition: max-height .5s ease-out;
}
/*.jz{float:left;width:420px;height:auto;margin:auto;padding-left:200px;}*/
/*.jz p{line-height:80px;text-align:center;font-size:50px;color:#ffffff;}*/
/*.jz span{display: block;width:420px;height:80px;line-height:80px;margin:20px 0;text-align:left;font-size:60px;background: #ffffff;}*/
.start,.stop{width:200px;height:80px;line-height:80px;text-align:center;font-size:64px;border-radius:10px;margin:auto;color:#ffffff;cursor: pointer;}
.start{background: #24ADD7;}
.stop{background: #FC6666;}
/*.lucky-list{float:left;width:300px;height: 500px;background: #666;margin: 10px;background: #ffffff;overflow: hidden;}*/
/*.lucky-list .p1{line-height:40px;text-align:center;font-size:20px;padding:0;}*/
/*.lucky-list p{line-height:30px;text-align:left;text-align:justify;padding-left:30px;}*/
* {
padding: 0;
margin: 0;
}
.row{
padding: 0;
margin: 0;
}
html,body {
width: 100%;
min-height: 100%
}
body {
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
overflow: hidden;
background-color: #D35254;
background-image: radial-gradient(#D35254, #b40306);
}
.clearfix:after {
clear: both;
display: table;
content: ''
}
.container {
position: relative;
-webkit-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-ms-transform: perspective(1000px);
-o-transform: perspective(1000px);
transform: perspective(1000px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
width: 85%;
height: 60%;
min-height: 65vh;
margin-top: 10vh;
display: none;
vertical-align: middle;
top: 20%;
}
.element,.js_current_dom {
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-color: #fff
}
.btn_outer {
width: 130px;
height: 130px;
position: fixed;
border-radius: 50%;
background: linear-gradient(#f2f2f2, #FFF);
top:40%;
left: 60%;
border: 1px solid #e3e3e3;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
z-index: 9;
}
.btn_stop {
top:70%;
left: 80%;
}
.btn_circle{
font-weight:bold;
font-size:25px;
background:#ff0618;
display:inline-block;
width:100px;
height:100px;
text-align:center;
line-height:100px;
border-radius:100%;
margin-top: -2px;
box-shadow:
0 10px 0 #dc0010,
0 15px 2px rgba(0,0,0,0.2);
cursor:pointer;
z-index: 9;
color: #ffffff;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear
}
.btn_circle:active{
transform:translateY(8px);
box-shadow:
0 2px 0 #ff0618,
0 4px 2px rgba(0,0,0,0.3);
}
.btn_circle:hover {
background-color: #FF4351;
}
.mask {
border-radius: 10px;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
display: none;
z-index: 999;
min-height: 85vh;
max-height: 85vh;
}
.lucky_icon {
height: 70%;
width: 70%;
border-radius: 50%;
}
.lucky_userInfo {
position: absolute;
height: 100px;
width: 100px;
color: #fff;
font-size: 24px;
right: 0;
float: right;
text-align: center;
margin: 0 auto;
}
.lucky_list {
width: 100%;
height: 100%;
padding: 15px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.6);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: center;
min-height: 80vh;
max-height: 85vh;
}
.lpl_userInfo {
width: 25%;
height: 100px;
text-align: center;
float: left;
margin-bottom: 10px
}
.lpl_userImage {
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%
}
.lpl_userName {
margin-top: 12px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
color: #fff
}
.lucky_userName {
text-align: center;
margin-top: 12px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.lucky_title {
text-align: center;
width: 100%;
font-size: 30px;
font-weight: 700;
color: #ff8c00;
height: 150px;
line-height: 150px;
/*background: url(img/topbg.png) no-repeat center center*/
}
.lucky_prize {
width: 280px
}
.lucky_people_list {
width: 100%
}
.flex {
display: flex;
flex-direction: row
}
.lucky_prize_box {
height: 200px;
display: flex;
flex-direction: row
}
.lucky_prize_direction {
width: 70px;
height: 100%;
background-color: transparent;
border: none;
color: #fff;
font-size: 60px;
text-align: center
}
.lucky_prize_direction.active {
color: #f22
}
button:focus {
outline: none
}
.lucky_prize_picture {
width: 160px;
display: flex;
justify-content: center;
align-items: center
}
.lucky_prize_show {
max-width: 100%;
max-height: 100%
}
.lucky_people_title {
width: 100%;
height: 60px;
background-color: #f22;
font-size: 24px;
color: #fff;
text-align: center;
line-height: 60px;
font-weight: 700;
margin-bottom: 20px;
}
.lucky_setting {
height: 50px;
background-color: #f22;
font-size: 16px;
color: #fff;
text-align: left;
line-height: 50px;
padding: 0 10px;
font-weight: 700;
margin-top: 25px
}
.select_box {
float: right;
margin-top: 1px
}
.select_lucky_number {
font-size: 22px;
border: 1px solid #eee;
outline: none
}
.lucky_number {
font-size: 24px
}
.lucky_prize_title {
height: 50px;
background-color: #f22;
color: #fff;
text-align: center;
line-height: 50px;
font-weight: 700;
margin-top: 25px
}
.lpl_list {
/*margin-top: 20px;*/
/*height: 480px;*/
overflow: auto;
box-sizing: border-box;
height: 68vh;
}
.lpl_list::-webkit-scrollbar {
display: none;
}
.loader_file {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.6);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 30px
}
.none {
display: none
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
<script type="text/javascript">
;(function() {
var DEG_TO_RAD = 0.017453292519943295;
var Matrix3D = function(n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) {
this.elements = window.Float32Array ? new Float32Array(16) : [];
var te = this.elements;
te[0] = (n11 !== undefined) ? n11 : 1;
te[4] = n12 || 0;
te[8] = n13 || 0;
te[12] = n14 || 0;
te[1] = n21 || 0;
te[5] = (n22 !== undefined) ? n22 : 1;
te[9] = n23 || 0;
te[13] = n24 || 0;
te[2] = n31 || 0;
te[6] = n32 || 0;
te[10] = (n33 !== undefined) ? n33 : 1;
te[14] = n34 || 0;
te[3] = n41 || 0;
te[7] = n42 || 0;
te[11] = n43 || 0;
te[15] = (n44 !== undefined) ? n44 : 1;
};
Matrix3D.prototype = {
set: function(n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) {
var te = this.elements;
te[0] = n11;
te[4] = n12;
te[8] = n13;
te[12] = n14;
te[1] = n21;
te[5] = n22;
te[9] = n23;
te[13] = n24;
te[2] = n31;
te[6] = n32;
te[10] = n33;
te[14] = n34;
te[3] = n41;
te[7] = n42;
te[11] = n43;
te[15] = n44;
return this;
},
identity: function() {
this.set(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
return this;
},
multiplyMatrices: function(a, be) {
var ae = a.elements;
var te = this.elements;
var a11 = ae[0]
, a12 = ae[4]
, a13 = ae[8]
, a14 = ae[12];
var a21 = ae[1]
, a22 = ae[5]
, a23 = ae[9]
, a24 = ae[13];
var a31 = ae[2]
, a32 = ae[6]
, a33 = ae[10]
, a34 = ae[14];
var a41 = ae[3]
, a42 = ae[7]
, a43 = ae[11]
, a44 = ae[15];
var b11 = be[0]
, b12 = be[1]
, b13 = be[2]
, b14 = be[3];
var b21 = be[4]
, b22 = be[5]
, b23 = be[6]
, b24 = be[7];
var b31 = be[8]
, b32 = be[9]
, b33 = be[10]
, b34 = be[11];
var b41 = be[12]
, b42 = be[13]
, b43 = be[14]
, b44 = be[15];
te[0] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41;
te[4] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42;
te[8] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43;
te[12] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44;
te[1] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41;
te[5] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42;
te[9] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43;
te[13] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44;
te[2] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41;
te[6] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42;
te[10] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43;
te[14] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44;
te[3] = a41 *.........完整代码请登录后点击上方下载按钮下载查看
网友评论0