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