jquery实现年会大屏三维抽奖效果代码
代码语言：html
所属分类：其他
代码描述：jquery实现年会大屏三维抽奖效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
padding: 0;
margin: 0;
}
html,body{
width:100%;
min-height:100%;
}
body {
background: url(//repo.bfw.wiki/bfwrepo/image/5eaa0f4300406.png) no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
font-family: "宋体";
}
.clearfix:after{
clear:both;
display: table;
content: '';
}
.left{
float:left;
}
.right{
float:right
}
.container {
position: absolute;
-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: 60%;
height: 60%;
left: 20%;
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_circle {
height: 100px;
width: 100px;
border:20px solid #eee;
line-height: 100px;
font-size: 24px;
text-align: center;
border-radius: 50%;
background-color: #f00;
cursor: pointer;
position: absolute;
right: 50px;
bottom: 50px;
z-index: 9;
color:#fff;
-webkit-transition:all 0.7s linear;
-moz-transition:all 0.7s linear;
-ms-transition:all 0.7s linear;
-o-transition:all 0.7s linear;
transition:all 0.7s linear;
}
.btn_circle:hover{
background-color: darkorange;
border-color: #fff;
}
.btn_start{
position: static;
margin:25px auto 0 auto;
}
.mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
z-index: 999;
}
.lucky_icon {
height: 70%;
width: 70%;
border-radius: 50%;
margin-left:15%;
}
.lucky_userInfo{
position: absolute;
height:100px;
width:100px;
color:#fff;
font-size: 24px;
}
.lucky_list{
width:760px;
height:560px;
padding:20px;
position: relative;
margin:0 auto;
background-color: rgba(255, 255, 255, 0.2);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.lpl_userInfo{
width:84px;
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: bold;
color:darkorange;
height:150px;
line-height: 150px;
}
.lucky_prize{
width:280px;
}
.lucky_people_list{
width:440px;
}
.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: bold;
}
.lucky_setting{
height:50px;
background-color: #f22;
font-size: 16px;
color:#fff;
text-align: left;
line-height: 50px;
padding:0 10px;
font-weight: bold;
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: bold;
margin-top:25px;
}
.lpl_list{
margin-top:20px;
height:480px;
overflow: auto;
box-sizing: border-box;
}
.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>
</head>
<body>
<div class="container none"></div>
<div class="mask"></div>
<div id="stop" class="btn_circle none">停止</div>
<div class="lucky_title">2018年***年会抽奖活动</div>
<div class="loader_file">
用户数据导入中 <span class="current_number"></span><span class="all_number"></span>
</div>
<div class="lucky_list clearfix">
<div class="left lucky_prize">
<div class="lucky_prize_box">
<button class="lucky_prize_left lucky_prize_direction"><</button>
<div data-default="1" class="lucky_prize_picture">
<img class="lucky_prize_show none"
src="//repo.bfw.wiki/bfwrepo/image/60bf1ce19319c.png"
alt="一等奖笔记本"/>
<img class="none lucky_prize_show"
src="//repo.bfw.wiki/bfwrepo/image/60d2ce3f0b4a4.png"
alt="二等奖平衡车"/>
<img class="none lucky_prize_show"
src="//repo.bfw.wiki/bfwrepo/image/60bf1caec478a.png"
alt="三等奖现金红包"/>
</div>
<button class="lucky_prize_right active lucky_prize_direction">></button>
</div>
<div class="lucky_prize_title">一等奖笔记本</div>
<div class="lucky_setting">
<span>
<b class="lucky_number">998</b>
人参与
</span>
<div class="select_box">
一次抽
<select name="select_lucky_number" class='select_lucky_number'>
<option selected = "selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
人
</div>
</div>
<div id="open" class="btn_circle btn_start">开始</div>
</div>
<div class="right lucky_people_list">
<div class="lucky_people_title">中奖名单</div>
<div class="lpl_list clearfix none">
<!--<div class="lpl_userInfo">-->
<!--<img class="lpl_userImage" src="http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTK9YW8jiaJuo8xHZohXgpMpzVCWleDx4ko9zLn5B8iavAR2yQpeLMR5BQjf2jicwcGURXq5xf4yguwIQ/132"-->
<!--alt=""/>-->
<!--<p class="lpl_userName">小木姐姐</p>-->
<!--</div>-->
</div>
<div class="lpl_list clearfix none">
</div>
<div class="lpl_list clearfix none">
</div>
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/* transformjs 1.1.6
* By dntzhang
* Github: https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
*/
; (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;
},
// 解决角度为90的整数倍导致Math.cos得到极小的数，其实是0。导致不渲染
_rounded: function (value, i) {
i = Math.pow(10, i || 15);
// default
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 : //DOM2
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 ? "" : "perspective(" + obj.perspective + "px) ") + "matrix3d(" + Array.prototype.slice.call(mtx.elements).join(",") + ")";
if (objIsElement) {
obj.style.transform = obj.style.msTransform = obj.style.OTransform = obj.style.MozTransform = obj.style.webkitTransform = transform;
} else {
obj.transform = transform;
}
});
obj.matrix3d = new Matrix3D();
if (!notPerspective) {
obj.perspective = 500;
}
obj.scaleX = obj.scaleY = obj.scaleZ = 1;
//由于image自带了x\y\z，所有加上translate前缀
obj.translateX = obj.translateY = obj.translateZ = obj.rotateX = obj.rotateY = obj.rotateZ = obj.skewX = obj.skewY = obj.originX = obj.originY = obj.originZ = 0;
}
Transform.getMatrix3D = function (option) {
var defaultOption = {
translateX: 0,
translateY: 0,
translateZ: 0,
rotateX: 0,
rotateY: 0,
rotateZ: 0,
skewX: 0,
skewY: 0,
originX: 0,
originY: 0,
originZ: 0,
scaleX: 1,
scaleY: 1,
scaleZ: 1
};
for (var key in option) {
if (option.hasOwnProperty(key)) {
defaultOption[key] = option[key];
}
}
return new Matrix3D().identity().appendTransform(defaultOption.translateX, defaultOption.translateY, defaultOption.translateZ, defaultOption.scaleX, defaultOption.scaleY, defaultOption.scaleZ, defaultOption.rotateX, defaultOption.rotateY, defaultOption.rotateZ, defaultOption.skewX, defaultOption.skewY, defaultOption.originX, defaultOption.originY, defaultOption.originZ).elements;
}
Transform.getMatrix2D = function(option){
var defaultOption = {
translateX: 0,
translateY: 0,
rotation: 0,
skewX: 0,
skewY: 0,
originX: 0,
originY: 0,
scaleX: 1,
scaleY: 1
};
for (var key in option) {
if (option.hasOwnProperty(key)) {
defaultOption[key] = option[key];
}
}
return new Matrix2D().identity().appendTransform(defaultOption.translateX, defaultOption.translateY, defaultOption.scaleX, defaultOption.scaleY, defaultOption.rotation, defaultOption.skewX, defaultOption.skewY, defaultOption.originX, defaultOption.originY);
}
if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = Transform;
}else {
window.Transform = Transform;
}
})();
/* tick https://github.com/AlloyTeam/AlloyTouch/blob/master/transformjs/asset/tick.js
* By dntzhang|当耐特
*/
; (function () {
if (!Date.now)
Date.now = function () { return new Date().getTime(); };
var vendors = ['webkit', 'moz'];
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
var vp = vendors[i];
window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame']
|| window[vp + 'CancelRequestAnimationFrame']);
}
if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
|| !window.requestAnimationFrame || !window.cancelAnimationFrame) {
var lastTime = 0;
window.requestAnimationFrame = function (callback) {
var now = Date.now();
var nextTime = Math.max(lastTime + 16, now);
return setTimeout(function () { callback(lastTime = nextTime); },
nextTime - now);
};
window.cancelAnimationFrame = clearTimeout;
}
var tickArr = [];
var tick = function (fn) {
tickArr.push(fn);
};
window.execTick = function () {
var i = 0, len = tickArr.length;
for (; i < len; i++) {
tickArr[i]();
}
requestAnimationFrame(execTick);
};
execTick();
window.tick = tick;
})();
</script>
<!--data为静态数据 如用ajax获取请取消输入引入-->
<!--抽奖动画-->
<script type="text/javascript" >
(function ($) {
$.fn.lucky = function (opt) {
var opts = {
row: 7, //每排显示个数 必须为奇数
col: 5, //每列显示个数 必须为奇数
depth: 6, //纵深度
iconW: 30, //图片的宽
iconH: 30, //图片的高
iconRadius: 8, //图片的圆角
data: personArray, //图片的地址数据
}
var _self = $(this);
var settings = $.extend({}, opts, opt);
var M = {
WinHeight: $(this).height(),
winWidth: $(this).width(),
isThisTag: false,
centerX: Math.ceil(settings.row / 2) - 1,
centerY: Math.ceil(settings.col / 2) - 1,
timer: null,
isStop: false,
};
// 初始化应用
var initFun = function () {
initEleFun();
stepFun();
};
var initEleFun = function () {
for (var i = 0; i < settings.depth; i++) {
createEleFun(i);
}
}
var createEleFun = function (n) {
// 创建所有的dom元素
var eleStr = '';
for (var i = 0; i < settings.row; i++) {
for (var r = 0; r < settings.col; r++) {
if (i == M.centerX && r == M.centerY) {
if (!M.isThisTag) {
eleStr += '<div style="' + styleFun(i, r) + '" class="js_current_dom"></div>';
M.isThisTag = true;
}
} else {
eleStr += '<div data-depth="' + n + '" style="' + styleFun(i, r) + '" class="element"></div>';
}
}
}
_self.append(eleStr);
}
//设置每个头像的位置与样式
var styleFun = function (i, r) {
onlyWidth = M.winWidth / settings.row,
onlyHeight = M.WinHeight / settings.col,
onlyCenterW = (M.winWidth / settings.row - settings.iconW) / 2,
onlyCenterH = (M.WinHeight / settings.col - settings.iconH) / 2;
var style = 'position:absolute;width:' + settings.iconW + 'px;height:' + settings.iconH + 'px;border-radius:' + settings.iconRadius + 'px;left:' + (i * onlyWidth + onlyCenterW) + 'px;top :' + (r * onlyHeight + onlyCenterH) + 'px;';
return style;
}
//让每个头像运动
var stepFun = function () {
var index = 0, elements = $('.element').length;
for (var i = 0; i < elements; i++) {
var element = $('.element')[i];
if (!!settings.data[i]) {
$(element).css('background-image', 'url(' + settings.data[i].image + ')');
} else {
index >= (settings.data.length - 1) ? index = 1 : ++index;
$(element).css('background-image', 'url(' + settings.data[index].image + ')');
}
var depth = $(element).attr('data-depth');
Transform(element);
element.translateZ = -depth * 200;
setTimeout(function (element) {
var random = Math.floor(Math.random() * 3) + 15;
tick(function () {
if (!M.isStop) {
element.translateZ >= 200 ? element.translateZ = -depth * 200 : element.translateZ += random;
}
})
}(element), 200)
}
//中间的头像运动
var thisElement = $('.js_current_dom')[0];
Transform(thisElement);
tick(function () {
thisElement.translateZ >= 200 ? thisElement.translateZ = 0 : thisElement.translateZ += 15;
})
}
var preloadImg = function(arr){
}
//让中间的头像随机切换背景图
var randomFun = function () {
M.timer = setInterval(function () {
//如果内定号码不存在，则为随机号码
var randomNum = Math.floor(Math.random() * settings.data.length); //（随机数）
$('.js_current_dom').css({
'background-image': 'url(' + settings.data[randomNum].image + ')'
})
}, 50)
}
//停止运动
M.stop = function () {
clearInterval(M.timer);
M.isStop = true;
}
//开始运动
M.open = function () {
randomFun();
M.isStop = false;
}
initFun();
return M;
}
})(jQuery);
</script>
<!--实际抽奖逻辑代码-->
<script type="text/javascript" >
$(function () {
/*
luckyNum为每次抽几人
luckyResult为抽奖结果的集合（数组）
luckyNum为5那么luckyResult的length也为5
*/
var Obj = {};
Obj.luckyResult = [];
Obj.luckyPrize = '';
Obj.luckyNum = $(".select_lucky_number").val();
/*
一次抽几人改变事件
*/
$(".select_lucky_number").bind('change', function () {
Obj.luckyNum = $(this).val();
})
/*
图片预加载
*/
function loadImage(arr, callback) {
var loadImageLen = 1;
var arrLen = arr.length;
$('.all_number').html("/" + arrLen);
for (var i = 0; i < arrLen; i++) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.onload = function () {
img.onload = null;
++loadImageLen;
$(".current_number").html(loadImageLen);
if (loadImageLen == arrLen) {
callback(img); //所有图片加载成功回调；
}
;
}
img.src = arr[i].image;
}
}
/*
把3D动画初始化，等待执行
personArray为本地引入数据
*/
Obj.M = $('.container').lucky({
row: 7, //每排显示个数 必须为奇数
col: 5,//每列显示个数 必须为奇数
depth: 5, //纵深度
iconW: 30, //图片的宽
iconH: 30, //图片的高
iconRadius: 8, //图片的圆角
data: personArray, //数据的地址数组
});
/*
执行图片预加载并关闭加载试图
*/
loadImage(personArray, function (img) {
$('.loader_file').hide();
});
/*
若为ajax请求执行这段代码
此为为ajax请求;
$.get('index.php',function(data){
if(data.res == 1){
personArray = data.data; //此为数组
//执行图片预加载并关闭加载试图
loadImage(pers.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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