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 * b11 + a42 * b21 + a43 * b31 + a44 * b41;
te[7] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42;
te[11] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43;
te[15] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44;
return this;
},
_rounded: function(value, i) {
i = Math.pow(10, i || 15);
return Math.round(value * i) / i;
},
_arrayWrap: function(arr) {
return window.Float32Array ? new Float32Array(arr) : arr;
},
appendTransform: function(x, y, z, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ, skewX, skewY, originX, originY, originZ) {
var rx = rotateX * DEG_TO_RAD;
var cosx = this._rounded(Math.cos(rx));
var sinx = this._rounded(Math.sin(rx));
var ry = rotateY * DEG_TO_RAD;
var cosy = this._rounded(Math.cos(ry));
var siny = this._rounded(Math.sin(ry));
var rz = rotateZ * DEG_TO_RAD;
var cosz = this._rounded(Math.cos(rz * -1));
var sinz = this._rounded(Math.sin(rz * -1));
this.multiplyMatrices(this, this._arrayWrap([1, 0, 0, x, 0, cosx, sinx, y, 0, -sinx, cosx, z, 0, 0, 0, 1]));
this.multiplyMatrices(this, this._arrayWrap([cosy, 0, siny, 0, 0, 1, 0, 0, -siny, 0, cosy, 0, 0, 0, 0, 1]));
this.multiplyMatrices(this, this._arrayWrap([cosz * scaleX, sinz * scaleY, 0, 0, -sinz * scaleX, cosz * scaleY, 0, 0, 0, 0, 1 * scaleZ, 0, 0, 0, 0, 1]));
if (skewX || skewY) {
this.multiplyMatrices(this, this._arrayWrap([this._rounded(Math.cos(skewX * DEG_TO_RAD)), this._rounded(Math.sin(skewX * DEG_TO_RAD)), 0, 0, -1 * this._rounded(Math.sin(skewY * DEG_TO_RAD)), this._rounded(Math.cos(skewY * DEG_TO_RAD)), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]));
}
if (originX || originY || originZ) {
this.elements[12] -= originX * this.elements[0] + originY * this.elements[4] + originZ * this.elements[8];
this.elements[13] -= originX * this.elements[1] + originY * this.elements[5] + originZ * this.elements[9];
this.elements[14] -= originX * this.elements[2] + originY * this.elements[6] + originZ * this.elements[10];
}
return this;
}
};
var Matrix2D = function(a, b, c, d, tx, ty) {
this.a = a == null ? 1 : a;
this.b = b || 0;
this.c = c || 0;
this.d = d == null ? 1 : d;
this.tx = tx || 0;
this.ty = ty || 0;
return this;
};
Matrix2D.prototype = {
identity: function() {
this.a = this.d = 1;
this.b = this.c = this.tx = this.ty = 0;
return this;
},
appendTransform: function(x, y, scaleX, scaleY, rotation, skewX, skewY, originX, originY) {
if (rotation % 360) {
var r = rotation * DEG_TO_RAD;
var cos = Math.cos(r);
var sin = Math.sin(r);
} else {
cos = 1;
sin = 0;
}
if (skewX || skewY) {
skewX *= DEG_TO_RAD;
skewY *= DEG_TO_RAD;
this.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);
this.append(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0);
} else {
this.append(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, x, y);
}
if (originX || originY) {
this.tx -= originX * this.a + originY * this.c;
this.ty -= originX * this.b + originY * this.d;
}
return this;
},
append: function(a, b, c, d, tx, ty) {
var a1 = this.a;
var b1 = this.b;
var c1 = this.c;
var d1 = this.d;
this.a = a * a1 + b * c1;
this.b = a * b1 + b * d1;
this.c = c * a1 + d * c1;
this.d = c * b1 + d * d1;
this.tx = tx * a1 + ty * c1 + this.tx;
this.ty = tx * b1 + ty * d1 + this.ty;
return this;
},
initialize: function(a, b, c, d, tx, ty) {
this.a = a;
this.b = b;
this.c = c;
this.d = d;
this.tx = tx;
this.ty = ty;
return this;
},
setValues: function(a, b, c, d, tx, ty) {
this.a = a == null ? 1 : a;
this.b = b || 0;
this.c = c || 0;
this.d = d == null ? 1 : d;
this.tx = tx || 0;
this.ty = ty || 0;
return this;
},
copy: function(matrix) {
return this.setValues(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);
}
};
function observe(target, props, callback) {
for (var i = 0, len = props.length; i < len; i++) {
var prop = props[i];
watch(target, prop, callback);
}
}
function watch(target, prop, callback) {
Object.defineProperty(target, prop, {
get: function() {
return this["_" + prop];
},
set: function(value) {
this["_" + prop] = value;
callback();
}
});
}
function isElement(o) {
return (typeof HTMLElement === "object" ? o instanceof HTMLElement : o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string");
}
function Transform(obj, notPerspective) {
if (obj.___mixCSS3Transform)
return;
var observeProps = ["translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"]
, objIsElement = isElement(obj);
if (!notPerspective) {
observeProps.push("perspective");
}
obj.___mixCSS3Transform = true
observe(obj, observeProps, function() {
var mtx = obj.matrix3d.identity().appendTransform(obj.translateX, obj.translateY, obj.translateZ, obj.scaleX, obj.scaleY, obj.scaleZ, obj.rotateX, obj.rotateY, obj.rotateZ, obj.skewX, obj.skewY, obj.originX, obj.originY, obj.originZ);
var transform = (notPerspective ? "" : "per.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0