chenjingyu
5 years ago
11 changed files with 839 additions and 175 deletions
@ -1,55 +1,51 @@ |
|||||||
<!DOCTYPE html> |
<!-- |
||||||
<html lang="en"> |
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-09-25 08:48:50 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-09-28 13:48:30 |
||||||
|
--> |
||||||
|
<html> |
||||||
|
<meta charset="utf-8"/> |
||||||
<body> |
<body> |
||||||
|
<div class="mainbox"> |
||||||
<div class="box"> |
<div class="colum"> |
||||||
<div class="lottery"> |
<div class="centerLeft" > |
||||||
<div class="block"> |
<div class="tanCenterbtn" > |
||||||
<div class="content"> |
<span name="zhidui" data-id=`{{chooseid}}`>请选择支队</span> |
||||||
<div class="none">未中奖</div> |
<span name="aaa" *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" (click)="chosseZhidui(key)">{{item.name}}</span> |
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="block"> |
|
||||||
<div class="content"> |
|
||||||
<div class="none">未中奖</div> |
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div class="block"> |
|
||||||
<div class="content"> |
|
||||||
|
|
||||||
<div class="text"> |
|
||||||
<p>二等奖</p> |
|
||||||
<p>罗技鼠标</p> |
|
||||||
</div> |
</div> |
||||||
|
<div class="colum" style="padding-left: 30%;padding-top: 10%;"> |
||||||
|
<!-- <div class="turntable-wrap"> |
||||||
|
<div class="light" id="turntable_light"></div> |
||||||
|
<div class="turntable" id="turntable"> |
||||||
|
<ul class="bg" id="turntable_bg"></ul> |
||||||
|
<ul class="gift" id="turntable_gift"></ul> |
||||||
</div> |
</div> |
||||||
|
<div class="pointer disabled" id="turntable_pointer">点击抽奖</div> |
||||||
|
</div> --> |
||||||
|
<div class="banner" name="banner" id="zhuanpan"> |
||||||
|
<div class="turnplate" style="background-image:url(../../../assets/images/turnplate-bg.png);background-size:100% 100%;"> |
||||||
|
<canvas class="item" id="wheelcanvas" width="422px" height="422px" ></canvas> |
||||||
|
<img class="pointer" src="../../../assets/images/turnplate-pointer.png" /> |
||||||
</div> |
</div> |
||||||
<div class="block"> |
|
||||||
<div class="content"> |
|
||||||
<div class="none">未中奖</div> |
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div class="block"> |
|
||||||
<div class="content"> |
|
||||||
|
|
||||||
<div class="text"> |
|
||||||
<p>三等奖</p> |
<div class="colum" style="display: none;margin-top: 20%;" id="end"> |
||||||
<p>一包糖果</p> |
<span id="jieguo" ></span> |
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="block"> |
|
||||||
<div class="content"> |
|
||||||
<div class="none">未中奖</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
<div class="btn">抽 奖</div> |
|
||||||
<div class="str"></div> |
|
||||||
</div> |
</div> |
||||||
|
|
||||||
|
|
||||||
</body> |
|
||||||
|
|
||||||
|
</body> |
||||||
</html> |
</html> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,126 +1,81 @@ |
|||||||
* { |
|
||||||
margin: 0; |
html, body { |
||||||
padding: 0; |
height: 100%; |
||||||
} |
} |
||||||
body { |
|
||||||
font-family: "Microsoft YaHei",微软雅黑; |
.mainbox { |
||||||
} |
width: 95%; |
||||||
.box { |
height: 95%; |
||||||
width: 600px; |
padding: 0.125rem 0.125rem 0; |
||||||
height: 600px; |
display: flex; |
||||||
background-color: #DEA681; |
|
||||||
border-radius: 50%; |
} |
||||||
margin: 30px auto; |
|
||||||
padding: 20px; |
.centerLeft{ |
||||||
position: relative; |
float: left; |
||||||
overflow: hidden; |
height: 100%; |
||||||
} |
width: 100%; |
||||||
.lottery { |
|
||||||
width: 600px; |
|
||||||
height: 600px; |
|
||||||
margin: 0 auto; |
|
||||||
border-radius: 50%; |
|
||||||
overflow: hidden; |
|
||||||
position: relative; |
position: relative; |
||||||
background-color: #330000; |
flex-direction: column; |
||||||
box-shadow: 0 0 15px #000; |
flex: 2%; |
||||||
} |
display: flex; |
||||||
.block { |
align-items:center; |
||||||
box-shadow: 0 0 1px #000 inset; |
box-sizing: border-box; |
||||||
position: absolute; |
margin: 0 0; |
||||||
|
.tanCenterbtn{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border: 1px solid #30bbec; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
user-select: none; |
||||||
|
background-size:100% 100%; |
||||||
|
span{ |
||||||
width: 300px; |
width: 300px; |
||||||
height: 300px; |
cursor:pointer; |
||||||
transform-origin: right bottom 0; |
border-bottom:1px solid #30bbec; |
||||||
-webkit-transform-origin: right bottom 0; |
padding: 8px ; |
||||||
} |
|
||||||
.block:nth-child(odd) { |
|
||||||
background-color: #F1AAA6; |
|
||||||
} |
|
||||||
.block:nth-child(even) { |
|
||||||
background-color: #FD5B78; |
|
||||||
} |
|
||||||
.block:nth-child(1) { |
|
||||||
transform: rotate(0deg) skewY(45deg); |
|
||||||
} |
|
||||||
.block:nth-child(2) { |
|
||||||
transform: rotate(45deg) skewY(45deg); |
|
||||||
} |
|
||||||
.block:nth-child(3) { |
|
||||||
transform: rotate(90deg) skewY(45deg); |
|
||||||
} |
|
||||||
.block:nth-child(4) { |
|
||||||
transform: rotate(135deg) skewY(45deg); |
|
||||||
} |
|
||||||
.block:nth-child(5) { |
|
||||||
transform: rotate(180deg) skewY(45deg); |
|
||||||
} |
|
||||||
.block:nth-child(6) { |
|
||||||
transform: rotate(225deg) skewY(45deg); |
|
||||||
} |
|
||||||
.block:nth-child(7) { |
|
||||||
transform: rotate(270deg) skewY(45deg); |
|
||||||
} |
|
||||||
.block:nth-child(8) { |
|
||||||
transform: rotate(315deg) skewY(45deg); |
|
||||||
} |
|
||||||
.content { |
|
||||||
width: 200px; |
|
||||||
height: 230px; |
|
||||||
transform-origin: center center 0; |
|
||||||
transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px); |
|
||||||
-webkit-transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px); |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
text-align: center; |
text-align: center; |
||||||
|
font-size: 24px; |
||||||
} |
} |
||||||
.content .img { |
|
||||||
width: 100px; |
|
||||||
height: 100px; |
|
||||||
margin: 0 auto; |
|
||||||
} |
} |
||||||
.content .text { |
|
||||||
width: 100px; |
|
||||||
height: 50px; |
|
||||||
font-size: 20px; |
|
||||||
line-height: 32px; |
|
||||||
margin: 0 auto; |
|
||||||
} |
} |
||||||
.content .none { |
.colum{ |
||||||
width: 34px; |
height: 100%; |
||||||
height: 200px; |
//width: 100%; |
||||||
margin: 0 auto; |
display:table-cell; |
||||||
|
vertical-align:middle; |
||||||
text-align: center; |
text-align: center; |
||||||
font-size: 34px; |
span{ |
||||||
line-height: 200%; |
font-size: 24px; |
||||||
font-weight: bold; |
|
||||||
} |
//padding-top: 50%; |
||||||
.content img { |
} |
||||||
width: 80px; |
} |
||||||
height: 100px; |
//选择后加背景色 |
||||||
} |
.beijicolor{ |
||||||
.btn { |
background-color: #F7BA2A ; |
||||||
width: 100px; |
} |
||||||
height: 100px; |
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} |
||||||
border-radius: 50%; |
body{color:#333; font-size:12px;font-family:"Microsoft YaHei"} |
||||||
text-align: center; |
ul,ol{list-style-type:none;} |
||||||
line-height: 100px; |
select,input,img,select{vertical-align:middle;} |
||||||
background-color: #9966CC; |
input{ font-size:12px;} |
||||||
position: absolute; |
a{ text-decoration:none; color:#000;} |
||||||
font-size: 28px; |
a:hover{color:#c00; text-decoration:none;} |
||||||
top: 270px; |
.clear{clear:both;} |
||||||
left: 270px; |
|
||||||
cursor: pointer; |
/* 大转盘样式 */ |
||||||
box-shadow: 0 0 14px #000 inset; |
.banner{max-height: 650px; |
||||||
color: #FFF; |
display: block; |
||||||
} |
width: 95%; |
||||||
.str { |
max-width: 650px; |
||||||
height: 0px; |
margin-left: auto; |
||||||
width: 0px; |
margin-right: auto; |
||||||
position: absolute; |
margin-bottom: 20px; |
||||||
top: 10px; |
} |
||||||
left: 300px; |
.banner .turnplate{display:block;width:100%;position:relative;} |
||||||
border-top: 60px solid #9966CC; |
.banner .turnplate canvas.item{width:100%;} |
||||||
border-left: 20px solid transparent; |
.banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;} |
||||||
border-right: 20px solid transparent; |
|
||||||
} |
|
||||||
|
After Width: | Height: | Size: 498 B |
|
After Width: | Height: | Size: 754 B |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,305 @@ |
|||||||
|
|
||||||
|
(function($) { |
||||||
|
var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "); |
||||||
|
for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a]; |
||||||
|
// Bad eval to preven google closure to remove it from code o_O
|
||||||
|
// After compresion replace it back to var IE = 'v' == '\v'
|
||||||
|
var IE = eval('"v"=="\v"'); |
||||||
|
|
||||||
|
jQuery.fn.extend({ |
||||||
|
rotate:function(parameters) |
||||||
|
{ |
||||||
|
if (this.length===0||typeof parameters=="undefined") return; |
||||||
|
if (typeof parameters=="number") parameters={angle:parameters}; |
||||||
|
var returned=[]; |
||||||
|
for (var i=0,i0=this.length;i<i0;i++) |
||||||
|
{ |
||||||
|
var element=this.get(i);
|
||||||
|
if (!element.Wilq32 || !element.Wilq32.PhotoEffect) { |
||||||
|
|
||||||
|
var paramClone = $.extend(true, {}, parameters);
|
||||||
|
var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj; |
||||||
|
|
||||||
|
returned.push($(newRotObject)); |
||||||
|
} |
||||||
|
else { |
||||||
|
element.Wilq32.PhotoEffect._handleRotation(parameters); |
||||||
|
} |
||||||
|
} |
||||||
|
return returned; |
||||||
|
}, |
||||||
|
getRotateAngle: function(){ |
||||||
|
var ret = []; |
||||||
|
for (var i=0,i0=this.length;i<i0;i++) |
||||||
|
{ |
||||||
|
var element=this.get(i);
|
||||||
|
if (element.Wilq32 && element.Wilq32.PhotoEffect) { |
||||||
|
ret[i] = element.Wilq32.PhotoEffect._angle; |
||||||
|
} |
||||||
|
} |
||||||
|
return ret; |
||||||
|
}, |
||||||
|
stopRotate: function(){ |
||||||
|
for (var i=0,i0=this.length;i<i0;i++) |
||||||
|
{ |
||||||
|
var element=this.get(i);
|
||||||
|
if (element.Wilq32 && element.Wilq32.PhotoEffect) { |
||||||
|
clearTimeout(element.Wilq32.PhotoEffect._timer); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Library agnostic interface
|
||||||
|
|
||||||
|
Wilq32=window.Wilq32||{}; |
||||||
|
Wilq32.PhotoEffect=(function(){ |
||||||
|
|
||||||
|
if (supportedCSS) { |
||||||
|
return function(img,parameters){ |
||||||
|
img.Wilq32 = { |
||||||
|
PhotoEffect: this |
||||||
|
}; |
||||||
|
|
||||||
|
this._img = this._rootObj = this._eventObj = img; |
||||||
|
this._handleRotation(parameters); |
||||||
|
} |
||||||
|
} else { |
||||||
|
return function(img,parameters) { |
||||||
|
// Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
|
||||||
|
this._img = img; |
||||||
|
|
||||||
|
this._rootObj=document.createElement('span'); |
||||||
|
this._rootObj.style.display="inline-block"; |
||||||
|
this._rootObj.Wilq32 =
|
||||||
|
{ |
||||||
|
PhotoEffect: this |
||||||
|
}; |
||||||
|
img.parentNode.insertBefore(this._rootObj,img); |
||||||
|
|
||||||
|
if (img.complete) { |
||||||
|
this._Loader(parameters); |
||||||
|
} else { |
||||||
|
var self=this; |
||||||
|
// TODO: Remove jQuery dependency
|
||||||
|
jQuery(this._img).bind("load", function() |
||||||
|
{ |
||||||
|
self._Loader(parameters); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
})(); |
||||||
|
|
||||||
|
Wilq32.PhotoEffect.prototype={ |
||||||
|
_setupParameters : function (parameters){ |
||||||
|
this._parameters = this._parameters || {}; |
||||||
|
if (typeof this._angle !== "number") this._angle = 0 ; |
||||||
|
if (typeof parameters.angle==="number") this._angle = parameters.angle; |
||||||
|
this._parameters.animateTo = (typeof parameters.animateTo==="number") ? (parameters.animateTo) : (this._angle);
|
||||||
|
|
||||||
|
this._parameters.step = parameters.step || this._parameters.step || null; |
||||||
|
this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; } |
||||||
|
this._parameters.duration = parameters.duration || this._parameters.duration || 1000; |
||||||
|
this._parameters.callback = parameters.callback || this._parameters.callback || function(){}; |
||||||
|
if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind);
|
||||||
|
}, |
||||||
|
_handleRotation : function(parameters){ |
||||||
|
this._setupParameters(parameters); |
||||||
|
if (this._angle==this._parameters.animateTo) { |
||||||
|
this._rotate(this._angle); |
||||||
|
} |
||||||
|
else {
|
||||||
|
this._animateStart();
|
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_BindEvents:function(events){ |
||||||
|
if (events && this._eventObj)
|
||||||
|
{ |
||||||
|
// Unbinding previous Events
|
||||||
|
if (this._parameters.bind){ |
||||||
|
var oldEvents = this._parameters.bind; |
||||||
|
for (var a in oldEvents) if (oldEvents.hasOwnProperty(a))
|
||||||
|
// TODO: Remove jQuery dependency
|
||||||
|
jQuery(this._eventObj).unbind(a,oldEvents[a]); |
||||||
|
} |
||||||
|
|
||||||
|
this._parameters.bind = events; |
||||||
|
for (var a in events) if (events.hasOwnProperty(a))
|
||||||
|
// TODO: Remove jQuery dependency
|
||||||
|
jQuery(this._eventObj).bind(a,events[a]); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_Loader:(function() |
||||||
|
{ |
||||||
|
if (IE) |
||||||
|
return function(parameters) |
||||||
|
{ |
||||||
|
var width=this._img.width; |
||||||
|
var height=this._img.height; |
||||||
|
this._img.parentNode.removeChild(this._img); |
||||||
|
|
||||||
|
this._vimage = this.createVMLNode('image'); |
||||||
|
this._vimage.src=this._img.src; |
||||||
|
this._vimage.style.height=height+"px"; |
||||||
|
this._vimage.style.width=width+"px"; |
||||||
|
this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
|
||||||
|
this._vimage.style.top = "0px"; |
||||||
|
this._vimage.style.left = "0px"; |
||||||
|
|
||||||
|
/* Group minifying a small 1px precision problem when rotating object */ |
||||||
|
this._container = this.createVMLNode('group'); |
||||||
|
this._container.style.width=width; |
||||||
|
this._container.style.height=height; |
||||||
|
this._container.style.position="absolute"; |
||||||
|
this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
|
||||||
|
this._container.appendChild(this._vimage); |
||||||
|
|
||||||
|
this._rootObj.appendChild(this._container); |
||||||
|
this._rootObj.style.position="relative"; // FIXES IE PROBLEM
|
||||||
|
this._rootObj.style.width=width+"px"; |
||||||
|
this._rootObj.style.height=height+"px"; |
||||||
|
this._rootObj.setAttribute('id',this._img.getAttribute('id')); |
||||||
|
this._rootObj.className=this._img.className;
|
||||||
|
this._eventObj = this._rootObj;
|
||||||
|
this._handleRotation(parameters);
|
||||||
|
} |
||||||
|
else |
||||||
|
return function (parameters) |
||||||
|
{ |
||||||
|
this._rootObj.setAttribute('id',this._img.getAttribute('id')); |
||||||
|
this._rootObj.className=this._img.className; |
||||||
|
|
||||||
|
this._width=this._img.width; |
||||||
|
this._height=this._img.height; |
||||||
|
this._widthHalf=this._width/2; // used for optimisation
|
||||||
|
this._heightHalf=this._height/2;// used for optimisation
|
||||||
|
|
||||||
|
var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width)); |
||||||
|
|
||||||
|
this._widthAdd = _widthMax - this._width; |
||||||
|
this._heightAdd = _widthMax - this._height; // widthMax because maxWidth=maxHeight
|
||||||
|
this._widthAddHalf=this._widthAdd/2; // used for optimisation
|
||||||
|
this._heightAddHalf=this._heightAdd/2;// used for optimisation
|
||||||
|
|
||||||
|
this._img.parentNode.removeChild(this._img);
|
||||||
|
|
||||||
|
this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width; |
||||||
|
this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height; |
||||||
|
|
||||||
|
this._canvas=document.createElement('canvas'); |
||||||
|
this._canvas.setAttribute('width',this._width); |
||||||
|
this._canvas.style.position="relative"; |
||||||
|
this._canvas.style.left = -this._widthAddHalf + "px"; |
||||||
|
this._canvas.style.top = -this._heightAddHalf + "px"; |
||||||
|
this._canvas.Wilq32 = this._rootObj.Wilq32; |
||||||
|
|
||||||
|
this._rootObj.appendChild(this._canvas); |
||||||
|
this._rootObj.style.width=this._width+"px"; |
||||||
|
this._rootObj.style.height=this._height+"px"; |
||||||
|
this._eventObj = this._canvas; |
||||||
|
|
||||||
|
this._cnv=this._canvas.getContext('2d'); |
||||||
|
this._handleRotation(parameters); |
||||||
|
} |
||||||
|
})(), |
||||||
|
|
||||||
|
_animateStart:function() |
||||||
|
{
|
||||||
|
if (this._timer) { |
||||||
|
clearTimeout(this._timer); |
||||||
|
} |
||||||
|
this._animateStartTime = +new Date; |
||||||
|
this._animateStartAngle = this._angle; |
||||||
|
this._animate(); |
||||||
|
}, |
||||||
|
_animate:function() |
||||||
|
{ |
||||||
|
var actualTime = +new Date; |
||||||
|
var checkEnd = actualTime - this._animateStartTime > this._parameters.duration; |
||||||
|
|
||||||
|
// TODO: Bug for animatedGif for static rotation ? (to test)
|
||||||
|
if (checkEnd && !this._parameters.animatedGif)
|
||||||
|
{ |
||||||
|
clearTimeout(this._timer); |
||||||
|
} |
||||||
|
else
|
||||||
|
{ |
||||||
|
if (this._canvas||this._vimage||this._img) { |
||||||
|
var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration); |
||||||
|
this._rotate((~~(angle*10))/10); |
||||||
|
} |
||||||
|
if (this._parameters.step) { |
||||||
|
this._parameters.step(this._angle); |
||||||
|
} |
||||||
|
var self = this; |
||||||
|
this._timer = setTimeout(function() |
||||||
|
{ |
||||||
|
self._animate.call(self); |
||||||
|
}, 10); |
||||||
|
} |
||||||
|
|
||||||
|
// To fix Bug that prevents using recursive function in callback I moved this function to back
|
||||||
|
if (this._parameters.callback && checkEnd){ |
||||||
|
this._angle = this._parameters.animateTo; |
||||||
|
this._rotate(this._angle); |
||||||
|
this._parameters.callback.call(this._rootObj); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_rotate : (function() |
||||||
|
{ |
||||||
|
var rad = Math.PI/180; |
||||||
|
if (IE) |
||||||
|
return function(angle) |
||||||
|
{ |
||||||
|
this._angle = angle; |
||||||
|
this._container.style.rotation=(angle%360)+"deg"; |
||||||
|
} |
||||||
|
else if (supportedCSS) |
||||||
|
return function(angle){ |
||||||
|
this._angle = angle; |
||||||
|
this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)"; |
||||||
|
} |
||||||
|
else
|
||||||
|
return function(angle) |
||||||
|
{ |
||||||
|
this._angle = angle; |
||||||
|
angle=(angle%360)* rad; |
||||||
|
// clear canvas
|
||||||
|
this._canvas.width = this._width+this._widthAdd; |
||||||
|
this._canvas.height = this._height+this._heightAdd; |
||||||
|
|
||||||
|
// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
|
||||||
|
this._cnv.translate(this._widthAddHalf,this._heightAddHalf); // at least center image on screen
|
||||||
|
this._cnv.translate(this._widthHalf,this._heightHalf); // we move image back to its orginal
|
||||||
|
this._cnv.rotate(angle); // rotate image
|
||||||
|
this._cnv.translate(-this._widthHalf,-this._heightHalf); // move image to its center, so we can rotate around its center
|
||||||
|
this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)
|
||||||
|
this._cnv.drawImage(this._img, 0, 0); // First - we draw image
|
||||||
|
} |
||||||
|
|
||||||
|
})() |
||||||
|
} |
||||||
|
|
||||||
|
if (IE) |
||||||
|
{ |
||||||
|
Wilq32.PhotoEffect.prototype.createVMLNode=(function(){ |
||||||
|
document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); |
||||||
|
try { |
||||||
|
!document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); |
||||||
|
return function (tagName) { |
||||||
|
return document.createElement('<rvml:' + tagName + ' class="rvml">'); |
||||||
|
}; |
||||||
|
} catch (e) { |
||||||
|
return function (tagName) { |
||||||
|
return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); |
||||||
|
}; |
||||||
|
}
|
||||||
|
})(); |
||||||
|
} |
||||||
|
})(jQuery); |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,354 @@ |
|||||||
|
|
||||||
|
var turnplate={ |
||||||
|
restaraunts:[], //大转盘奖品名称
|
||||||
|
colors:[], //大转盘奖品区块对应背景颜色
|
||||||
|
outsideRadius:192, //大转盘外圆的半径
|
||||||
|
textRadius:155, //大转盘奖品位置距离圆心的距离
|
||||||
|
insideRadius:68, //大转盘内圆的半径
|
||||||
|
startAngle:0, //开始角度
|
||||||
|
bRotate:false //false:停止;ture:旋转
|
||||||
|
}; |
||||||
|
choujiang=[ |
||||||
|
{name:"钦州支队",idnum:1,result:""}, |
||||||
|
{name:"南宁支队",idnum:1,result:""}, |
||||||
|
{name:"柳州支队",idnum:1,result:""}, |
||||||
|
{name:"河池支队",idnum:1,result:""}, |
||||||
|
{name:"来宾支队",idnum:1,result:""}, |
||||||
|
{name:"贺州支队",idnum:1,result:""}, |
||||||
|
{name:"防城港支队",idnum:1,result:""}, |
||||||
|
{name:"崇左支队",idnum:1,result:""}, |
||||||
|
{name:"贵港支队",idnum:9,result:""}, |
||||||
|
{name:"梧州支队",idnum:10,result:""}, |
||||||
|
{name:"百色支队",idnum:11,result:""}, |
||||||
|
{name:"玉林支队",idnum:12,result:""}, |
||||||
|
{name:"北海支队",idnum:13,result:""}, |
||||||
|
{name:"桂林支队",idnum:14,result:""} |
||||||
|
] |
||||||
|
$(document).ready(function(){ |
||||||
|
//var chooseid = $( "span[name='zhidui']").attr('id');
|
||||||
|
$("span[name='aaa']").on("click",function(){ |
||||||
|
console.log($(this).html()) |
||||||
|
if($(this).html()=="钦州支队"){ |
||||||
|
turnplate.restaraunts = ["广西东油沥青有限公司", "钦州吾悦广场", "钦州天亿石化有限公司"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6"]; |
||||||
|
console.log(choujiang[0].result) |
||||||
|
if(choujiang[0].idnum<=2) |
||||||
|
{ |
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
console.log(choujiang[0].idnum) |
||||||
|
choujiang[0].idnum++ |
||||||
|
choujiang[0].result='钦州吾悦广场' |
||||||
|
$("#jieguo").empty() |
||||||
|
}else{ |
||||||
|
$("#zhuanpan").hide() |
||||||
|
$("#end").show(); |
||||||
|
console.log(choujiang[0].idnum) |
||||||
|
$("#jieguo").empty() |
||||||
|
$("#jieguo").append("您的抽签结果为：</br>"+choujiang[0].result) |
||||||
|
} |
||||||
|
|
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="南宁支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["九洲国际（超高层）", "南宁国际会展中心", "维景国际酒店", "荔园山庄 "]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||||||
|
if(choujiang[1].idnum<=2) |
||||||
|
{ |
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
choujiang[1].idnum++ |
||||||
|
choujiang[1].result='九洲国际（超高层）' |
||||||
|
$("#jieguo").empty() |
||||||
|
}else{ |
||||||
|
$("#zhuanpan").hide() |
||||||
|
$("#end").show(); |
||||||
|
$("#jieguo").empty() |
||||||
|
$("#jieguo").append("您的抽签结果为：</br>"+choujiang[1].result) |
||||||
|
} |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="柳州支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["广西柳州莲花山庄", "柳州万达广场", "龙城地下商业街", "板栗园加气站 ","地王财富中心"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="河池支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["河池市中石化金城江油库", "河池市宜州区地下商业街", "南城百货（地下） ","宁铁燃气有限责任公司","广西河池市大洋购物中心"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="来宾支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["来宾饭店（高层）", "宝晨化工", "天成百货（地下） ","百悦商业广场(地下）","来宾市方盛广场（人员密集）"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="贺州支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["贺州市国际酒店（高层）", "宝晨化工有限公司", "贺州市南宁百货大楼", "远东国贸地下停车场 "]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
} |
||||||
|
else if($(this).html()=="防城港支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["防城港供电局", "北京华联超市桂海东盟店", "港宸国际大酒店（高层）", "永旺天和商贸有限公司(只做地下一） ", "广西中油能源有限公司 ","中海油广西防城港天然气有限责任公司 "]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="崇左支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["崇左油库","崇左市雅图影视广场（6层商场）"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="贵港支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "维多利亚酒店（高层）","平南中心购物广场（地下）"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="梧州支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "梧州市中石化火山油库","平南中心购物广场（地下）", ]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="百色支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） "]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="玉林支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","玉林市中医医院"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="北海支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","和安宁春城（大型城市综合体）"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
}else if($(this).html()=="桂林支队") |
||||||
|
{ |
||||||
|
turnplate.restaraunts = ["兴安油库", "宏谋酒店（高层）"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF"];
|
||||||
|
$("#zhuanpan").show() |
||||||
|
$("#end").hide(); |
||||||
|
$("#jieguo").empty() |
||||||
|
drawRouletteWheel() |
||||||
|
} |
||||||
|
}); |
||||||
|
console.log(turnplate.restaraunts) |
||||||
|
//动态添加大转盘的奖品与奖品区域背景颜色
|
||||||
|
/* turnplate.restaraunts = ["广西东油沥青有限公司", "钦州天亿石化有限公司", "九洲国际（超高层）", "南宁国际会展中心 ", "维景国际酒店", "荔园山庄"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"]; */ |
||||||
|
/* turnplate.restaraunts = ["白云边", "关公坊", "黄鹤楼", "国宝 ", "陈克明", "金沙河", "雪花", "康师傅", "脉动","奥星","金龙鱼","中昌"]; |
||||||
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; */ |
||||||
|
|
||||||
|
|
||||||
|
var rotateTimeOut = function (){ |
||||||
|
$('#wheelcanvas').rotate({ |
||||||
|
angle:0, |
||||||
|
animateTo:2160, |
||||||
|
duration:8000, |
||||||
|
callback:function (){ |
||||||
|
alert('网络超时，请检查您的网络设置！'); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//旋转转盘 item:奖品位置; txt：提示语;
|
||||||
|
var rotateFn = function (item, txt){ |
||||||
|
var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2)); |
||||||
|
if(angles<270){ |
||||||
|
angles = 270 - angles;
|
||||||
|
}else{ |
||||||
|
angles = 360 - angles + 270; |
||||||
|
} |
||||||
|
$('#wheelcanvas').stopRotate(); |
||||||
|
$('#wheelcanvas').rotate({ |
||||||
|
angle:0, |
||||||
|
animateTo:angles+1800, |
||||||
|
duration:8000, |
||||||
|
callback:function (){ |
||||||
|
console.log(turnplate.restaraunts.length) |
||||||
|
$("#zhuanpan").hide() |
||||||
|
$("#end").show(); |
||||||
|
var dataLength=turnplate.restaraunts.length |
||||||
|
if(dataLength>=5) |
||||||
|
{ |
||||||
|
$("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[4]) |
||||||
|
}else if(dataLength==3){ |
||||||
|
$("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[1]) |
||||||
|
} |
||||||
|
else{ |
||||||
|
$("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[0]) |
||||||
|
} |
||||||
|
turnplate.bRotate = !turnplate.bRotate; |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
$('.pointer').click(function (){ |
||||||
|
if(turnplate.bRotate)return; |
||||||
|
turnplate.bRotate = !turnplate.bRotate; |
||||||
|
//获取随机数(奖品个数范围内)
|
||||||
|
var item = rnd(1,turnplate.restaraunts.length); |
||||||
|
console.log(item) |
||||||
|
//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
|
||||||
|
rotateFn(item, turnplate.restaraunts[item-1]); |
||||||
|
/* switch (item) { |
||||||
|
case 1: |
||||||
|
rotateFn(252, turnplate.restaraunts[0]); |
||||||
|
break; |
||||||
|
case 2: |
||||||
|
rotateFn(216, turnplate.restaraunts[1]); |
||||||
|
break; |
||||||
|
case 3: |
||||||
|
rotateFn(180, turnplate.restaraunts[2]); |
||||||
|
break; |
||||||
|
case 4: |
||||||
|
rotateFn(144, turnplate.restaraunts[3]); |
||||||
|
break; |
||||||
|
case 5: |
||||||
|
rotateFn(108, turnplate.restaraunts[4]); |
||||||
|
break; |
||||||
|
case 6: |
||||||
|
rotateFn(72, turnplate.restaraunts[5]); |
||||||
|
break; |
||||||
|
case 7: |
||||||
|
rotateFn(36, turnplate.restaraunts[6]); |
||||||
|
break; |
||||||
|
case 8: |
||||||
|
rotateFn(360, turnplate.restaraunts[7]); |
||||||
|
break; |
||||||
|
case 9: |
||||||
|
rotateFn(324, turnplate.restaraunts[8]); |
||||||
|
break; |
||||||
|
case 10: |
||||||
|
rotateFn(288, turnplate.restaraunts[9]); |
||||||
|
break; |
||||||
|
} */ |
||||||
|
console.log(item); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
//控制中奖结果
|
||||||
|
function rnd(n, m){ |
||||||
|
var random = 5; |
||||||
|
//var random = Math.floor(Math.random()*(m-n+1)+n);
|
||||||
|
return random; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
|
||||||
|
window.onload=function(){ |
||||||
|
drawRouletteWheel(); |
||||||
|
}; |
||||||
|
|
||||||
|
function drawRouletteWheel() {
|
||||||
|
var canvas = document.getElementById("wheelcanvas");
|
||||||
|
if (canvas.getContext) { |
||||||
|
//根据奖品个数计算圆周角度
|
||||||
|
var arc = Math.PI / (turnplate.restaraunts.length/2); |
||||||
|
var ctx = canvas.getContext("2d"); |
||||||
|
//在给定矩形内清空一个矩形
|
||||||
|
ctx.clearRect(0,0,422,422); |
||||||
|
//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
|
||||||
|
ctx.strokeStyle = "#FFBE04"; |
||||||
|
//font 属性设置或返回画布上文本内容的当前字体属性
|
||||||
|
ctx.font = '16px Microsoft YaHei';
|
||||||
|
for(var i = 0; i < turnplate.restaraunts.length; i++) {
|
||||||
|
var angle = turnplate.startAngle + i * arc; |
||||||
|
ctx.fillStyle = turnplate.colors[i]; |
||||||
|
ctx.beginPath(); |
||||||
|
//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
|
||||||
|
ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
|
||||||
|
ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true); |
||||||
|
ctx.stroke();
|
||||||
|
ctx.fill(); |
||||||
|
//锁画布(为了保存之前的画布状态)
|
||||||
|
ctx.save();
|
||||||
|
|
||||||
|
//----绘制奖品开始----
|
||||||
|
ctx.fillStyle = "#E5302F"; |
||||||
|
var text = turnplate.restaraunts[i]; |
||||||
|
var line_height = 17; |
||||||
|
//translate方法重新映射画布上的 (0,0) 位置
|
||||||
|
ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius); |
||||||
|
|
||||||
|
//rotate方法旋转当前的绘图
|
||||||
|
ctx.rotate(angle + arc / 2 + Math.PI / 2); |
||||||
|
|
||||||
|
/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/ |
||||||
|
if(text.indexOf("M")>0){//流量包
|
||||||
|
var texts = text.split("M"); |
||||||
|
for(var j = 0; j<texts.length; j++){ |
||||||
|
ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei'; |
||||||
|
if(j == 0){ |
||||||
|
ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height); |
||||||
|
}else{ |
||||||
|
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height); |
||||||
|
} |
||||||
|
} |
||||||
|
}else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围
|
||||||
|
text = text.substring(0,6)+"||"+text.substring(6); |
||||||
|
var texts = text.split("||"); |
||||||
|
for(var j = 0; j<texts.length; j++){ |
||||||
|
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
//在画布上绘制填色的文本。文本的默认颜色是黑色
|
||||||
|
//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
|
||||||
|
ctx.fillText(text, -ctx.measureText(text).width / 2, 0); |
||||||
|
} |
||||||
|
|
||||||
|
//添加对应图标
|
||||||
|
if(text.indexOf("闪币")>0){ |
||||||
|
var img= document.getElementById("shan-img"); |
||||||
|
img.onload=function(){
|
||||||
|
ctx.drawImage(img,-15,10);
|
||||||
|
};
|
||||||
|
ctx.drawImage(img,-15,10);
|
||||||
|
}else if(text.indexOf("谢谢参与")>=0){ |
||||||
|
var img= document.getElementById("sorry-img"); |
||||||
|
img.onload=function(){
|
||||||
|
ctx.drawImage(img,-15,10);
|
||||||
|
};
|
||||||
|
ctx.drawImage(img,-15,10);
|
||||||
|
} |
||||||
|
//把当前画布返回（调整）到上一个save()状态之前
|
||||||
|
ctx.restore(); |
||||||
|
//----绘制奖品结束----
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} |
||||||
Loading…
Reference in new issue