12 changed files with 1233 additions and 1 deletions
@ -0,0 +1,85 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-09-25 08:48:50 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-10-14 09:08:17 |
||||||
|
--> |
||||||
|
<html> |
||||||
|
<meta charset="utf-8"/> |
||||||
|
<body> |
||||||
|
<div class="head"> |
||||||
|
<img src="../../../assets/images/head.png"> |
||||||
|
<!-- <span>指挥员能力考评抽签</span> --> |
||||||
|
<img class="ziti" src="../../../assets/images/tophead.png"> |
||||||
|
</div> |
||||||
|
<div class="mainbox"> |
||||||
|
<!-- <div class="colum" style="margin-left: 13%;width: 100px;"> |
||||||
|
<div class="centerLefta" > |
||||||
|
<div class="tanCenterbtna" id="chooseZhi"> |
||||||
|
<span style="background-color: #ff4d29;color:#FFF;" >序号</span> |
||||||
|
<span *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" >{{item.idnum}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> --> |
||||||
|
<div class="colum" > |
||||||
|
<div class="centerLeft" > |
||||||
|
<div class="tanCenterbtn" id="chooseZhi"> |
||||||
|
<span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span> |
||||||
|
<span name="aaa" *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" (click)="chosseZhidui(key)">{{item.name}}<img style="margin-left: 8px;display: none;" src="../../../assets/images/dui.png"></span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="colum"> |
||||||
|
<div class="centerLeft"> |
||||||
|
<div class="tanCenterbtn" id="endjieguo"> |
||||||
|
<span style="text-align: center;background-color: #ff4d29;color:#FFF;">抽签结果:</span> |
||||||
|
<span *ngFor="let item of choujiang; let key=index" ></span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="line" style="padding-top:50px;"> |
||||||
|
|
||||||
|
<div class="content" style="text-align: center; background: url('./img/machine.png') no-repeat 50% 120px; height: 500px;"> |
||||||
|
|
||||||
|
<h1>Feel free to build your oun casino!</h1> |
||||||
|
|
||||||
|
<div style="clear:both; padding-top: 215px;width: 335px;margin: 0 auto;"> |
||||||
|
<div id="machine4" class="slotMachine" style="margin-left: -65px;"> |
||||||
|
<div class="slot slot1">无</div> |
||||||
|
<div class="slot slot1">博山区</div> |
||||||
|
<div class="slot slot2">张店区</div> |
||||||
|
<div class="slot slot3">周村区</div> |
||||||
|
<div class="slot slot4">淄川区</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="content text-center"> |
||||||
|
<div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px">Shuffle!</div> |
||||||
|
<div id="slotMachineButtonStop" class="slotMachineButton" style="font-size: 25px">Stop!</div> |
||||||
|
</div> |
||||||
|
<div class="clearfix"></div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<!-- <div class="colum" style="display: none;padding-left: 10%;margin-top: 20%;" id="end"> |
||||||
|
<span id="jieguo" ></span> |
||||||
|
</div> --> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,184 @@ |
|||||||
|
|
||||||
|
html, body { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-image: url("../../../assets/images/backgroud.png"); |
||||||
|
background-size: 100%; |
||||||
|
//background-size: 99% 99%; |
||||||
|
} |
||||||
|
.head{ |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
/* background-image: url("../../../assets/images/head.png"); |
||||||
|
width: 50%; */ |
||||||
|
img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.ziti{ |
||||||
|
position: relative; |
||||||
|
bottom: 70%; |
||||||
|
left: 40%; |
||||||
|
width: 20%; |
||||||
|
height: 53%; |
||||||
|
} |
||||||
|
span{ |
||||||
|
position: relative; |
||||||
|
bottom: 70%; |
||||||
|
left: 45%; |
||||||
|
font-size: 28px; |
||||||
|
background:linear-gradient(#ff4b27, #ff6e41); |
||||||
|
-webkit-background-clip: text; |
||||||
|
color: transparent; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
text-fill-color: transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
.mainbox { |
||||||
|
width: 99%; |
||||||
|
height: 90%; |
||||||
|
padding: 0.125rem 0.125rem 0; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
/* background-attachment: fixed; |
||||||
|
background-repeat:no-repeat; */ |
||||||
|
} |
||||||
|
|
||||||
|
.centerLeft{ |
||||||
|
background-color: #FFF; |
||||||
|
float: left; |
||||||
|
height: 98%; |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
flex-direction: column; |
||||||
|
flex: 2%; |
||||||
|
display: flex; |
||||||
|
align-items:center; |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 0 0; |
||||||
|
.tanCenterbtn{ |
||||||
|
width: 350px; |
||||||
|
height: 100%; |
||||||
|
border: 1px solid #ECEDEE; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
user-select: none; |
||||||
|
background-size:100% 100%; |
||||||
|
span{ |
||||||
|
white-space: nowrap; |
||||||
|
font-family: Arial; |
||||||
|
color: #000; |
||||||
|
z-index:99; |
||||||
|
width: 300px; |
||||||
|
height: 40px; |
||||||
|
cursor:pointer; |
||||||
|
border-bottom:1px solid #ECEDEE; |
||||||
|
padding:8px 24px ; |
||||||
|
text-align: center; |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.centerLefta{ |
||||||
|
background-color: #FFF; |
||||||
|
float: left; |
||||||
|
height: 98%; |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
flex-direction: column; |
||||||
|
flex: 2%; |
||||||
|
display: flex; |
||||||
|
align-items:center; |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 0 0; |
||||||
|
.tanCenterbtna{ |
||||||
|
width: 100px; |
||||||
|
height: 100%; |
||||||
|
border: 1px solid #ECEDEE; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
user-select: none; |
||||||
|
background-size:100% 100%; |
||||||
|
span{ |
||||||
|
white-space: nowrap; |
||||||
|
font-family: Arial; |
||||||
|
color: #000; |
||||||
|
z-index:99; |
||||||
|
width: 50px; |
||||||
|
height: 40px; |
||||||
|
cursor:pointer; |
||||||
|
border-bottom:1px solid #ECEDEE; |
||||||
|
padding:8px 24px ; |
||||||
|
text-align: center; |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.colum{ |
||||||
|
height: 90%; |
||||||
|
width: 350px; |
||||||
|
margin-top: 72px; |
||||||
|
display:table-cell; |
||||||
|
vertical-align:middle; |
||||||
|
text-align: center; |
||||||
|
span{ |
||||||
|
font-size: 24px; |
||||||
|
|
||||||
|
//padding-top: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
.zhuan{ |
||||||
|
width: 500px; |
||||||
|
margin-left: 160px; |
||||||
|
margin-top: 10%; |
||||||
|
} |
||||||
|
.stop{ |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
.button { |
||||||
|
height: 48px; |
||||||
|
width: 130px; |
||||||
|
background-color:transparent; |
||||||
|
border-radius: 4px; |
||||||
|
border: 1px solid #ECEDEE; |
||||||
|
color: #FFF; |
||||||
|
padding: 12px 32px; |
||||||
|
text-align: center; |
||||||
|
text-decoration: none; |
||||||
|
display: inline-block; |
||||||
|
font-size: 16px; |
||||||
|
margin: 4px 2px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.chongzhi{ |
||||||
|
position: relative; |
||||||
|
top: 85%; |
||||||
|
right: 17%; |
||||||
|
} |
||||||
|
|
||||||
|
//选择后加背景色 |
||||||
|
.beijicolor{ |
||||||
|
background-color:#FE693E ; |
||||||
|
} |
||||||
|
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} |
||||||
|
body{color:#333; font-size:12px;font-family:"Microsoft YaHei"} |
||||||
|
ul,ol{list-style-type:none;} |
||||||
|
select,input,img,select{vertical-align:middle;} |
||||||
|
input{ font-size:12px;} |
||||||
|
a{ text-decoration:none; color:#000;} |
||||||
|
a:hover{color:#c00; text-decoration:none;} |
||||||
|
.clear{clear:both;} |
||||||
|
|
||||||
|
/* 大转盘样式 */ |
||||||
|
.banner{//max-height: 650px; |
||||||
|
display: block; |
||||||
|
width: 95%; |
||||||
|
//max-width: 650px; |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.banner .turnplate{display:block;width:100%;position:relative;} |
||||||
|
.banner .turnplate canvas.item{width:100%;height: 100%;} |
||||||
|
.banner .turnplate img.pointer{position:absolute;width:30.5%;height:36.5%;left:34.6%;top:28.5%;} |
||||||
|
|
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { FirstStepComponent } from './first-step.component'; |
||||||
|
|
||||||
|
describe('FirstStepComponent', () => { |
||||||
|
let component: FirstStepComponent; |
||||||
|
let fixture: ComponentFixture<FirstStepComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ FirstStepComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(FirstStepComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import '../../../assets/js/firststep' |
||||||
|
@Component({ |
||||||
|
selector: 'app-first-step', |
||||||
|
templateUrl: './first-step.component.html', |
||||||
|
styleUrls: ['./first-step.component.scss'] |
||||||
|
}) |
||||||
|
export class FirstStepComponent implements OnInit { |
||||||
|
|
||||||
|
constructor() { } |
||||||
|
|
||||||
|
ngOnInit(){ |
||||||
|
window.setTimeout(()=>{ |
||||||
|
//zhuan.drawRouletteWheel()
|
||||||
|
},0) |
||||||
|
|
||||||
|
} |
||||||
|
//支队数据和是否抽奖
|
||||||
|
choujiang=[ |
||||||
|
{name:"南宁支队",idnum:1}, |
||||||
|
{name:"柳州支队",idnum:2}, |
||||||
|
{name:"桂林支队",idnum:3}, |
||||||
|
{name:"梧州支队",idnum:4}, |
||||||
|
{name:"北海支队",idnum:5}, |
||||||
|
{name:"防城港支队",idnum:6}, |
||||||
|
{name:"钦州支队",idnum:7}, |
||||||
|
{name:"贵港支队",idnum:8}, |
||||||
|
{name:"玉林支队",idnum:9}, |
||||||
|
{name:"百色支队",idnum:10}, |
||||||
|
{name:"贺州支队",idnum:11}, |
||||||
|
{name:"河池支队",idnum:12}, |
||||||
|
{name:"来宾支队",idnum:13}, |
||||||
|
{name:"崇左支队",idnum:14} |
||||||
|
] |
||||||
|
//选中支队
|
||||||
|
chooseid=-1 |
||||||
|
chosseZhidui(key){ |
||||||
|
this.chooseid=key |
||||||
|
} |
||||||
|
|
||||||
|
turnplate={ |
||||||
|
restaraunts:[], //大转盘奖品名称
|
||||||
|
colors:[], //大转盘奖品区块对应背景颜色
|
||||||
|
outsideRadius:192, //大转盘外圆的半径
|
||||||
|
textRadius:155, //大转盘奖品位置距离圆心的距离
|
||||||
|
insideRadius:68, //大转盘内圆的半径
|
||||||
|
startAngle:0, //开始角度
|
||||||
|
bRotate:false //false:停止;ture:旋转
|
||||||
|
}; |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,290 @@ |
|||||||
|
@charset "utf-8"; |
||||||
|
/* CSS Document */ |
||||||
|
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One); |
||||||
|
|
||||||
|
a{ |
||||||
|
color: #ccd500; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
a:hover{ |
||||||
|
text-decoration: underline; |
||||||
|
color: #a9b119; |
||||||
|
} |
||||||
|
.clear { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
html { |
||||||
|
position: relative; |
||||||
|
min-height: 100%; |
||||||
|
} |
||||||
|
body { |
||||||
|
} |
||||||
|
footer { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
height: 80px; |
||||||
|
width: 100%; |
||||||
|
background: black; |
||||||
|
} |
||||||
|
b{ |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.htmldemo p{font-size: 16px;font-family: "微软雅黑"} |
||||||
|
/* Titulos |
||||||
|
-------------------------------------------------------------------------*/ |
||||||
|
h1{ |
||||||
|
width: 100%; |
||||||
|
color: #000000; |
||||||
|
font-size: 40px; |
||||||
|
margin-bottom: 25px; |
||||||
|
} |
||||||
|
h2{ |
||||||
|
color: #000000; |
||||||
|
display: table-cell; |
||||||
|
float: left; |
||||||
|
font-size: 45px; |
||||||
|
line-height: 40px; |
||||||
|
margin: 0 0 50px; |
||||||
|
text-align: center; |
||||||
|
width: 100%; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
h2 span{ |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
h3{ |
||||||
|
float: left; |
||||||
|
width: 100%; |
||||||
|
margin: 0 0 20px 0; |
||||||
|
color: white; |
||||||
|
font-size:40px; |
||||||
|
font-family: 'Lato', 'sans-serif'; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
h4{ |
||||||
|
color: #ffffff; |
||||||
|
display: table-cell; |
||||||
|
float: left; |
||||||
|
font-size: 35px; |
||||||
|
line-height: 31px; |
||||||
|
margin: 0 0 0; |
||||||
|
text-align: center; |
||||||
|
width: 100%; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
|
||||||
|
p.title{ |
||||||
|
color: #000000; |
||||||
|
display: table-cell; |
||||||
|
float: left; |
||||||
|
font-size: 45px; |
||||||
|
line-height: 40px; |
||||||
|
margin: 0 0 50px; |
||||||
|
text-align: center; |
||||||
|
width: 100%; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
.grey { color:#444;} |
||||||
|
|
||||||
|
/* INICIO |
||||||
|
-------------------------------------------------------------------------*/ |
||||||
|
#header{ |
||||||
|
margin: 0 auto 0; |
||||||
|
width: 100%; |
||||||
|
position: absolute; |
||||||
|
text-align: center; |
||||||
|
top: 0px; |
||||||
|
background-color: #6C5726; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
padding: 50px 0px; |
||||||
|
border-top: 10px solid #A48E4E; |
||||||
|
border-bottom: 10px solid #A48E4E; |
||||||
|
} |
||||||
|
#header table, #footer table{ |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
#header table td, #footer table td{ |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
#header .content{ |
||||||
|
color: #FFFFFF; |
||||||
|
float: left; |
||||||
|
font-size: 50px; |
||||||
|
font-weight: 300; |
||||||
|
line-height: 42px; |
||||||
|
margin-top: 30px; |
||||||
|
text-align: center; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
#header .content, #footer .content{ |
||||||
|
font-family: 'Pathway Gothic One'; |
||||||
|
color: #ffffff; |
||||||
|
float: left; |
||||||
|
font-size: 70px; |
||||||
|
font-weight: 300; |
||||||
|
line-height: 80px; |
||||||
|
margin-top: 2px; |
||||||
|
margin-bottom: 20px; |
||||||
|
text-align: center; |
||||||
|
width: 100%; |
||||||
|
padding: 30px 0px; |
||||||
|
} |
||||||
|
#header .content > div, #footer .content > div{ |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
#footer{ |
||||||
|
width:100%; |
||||||
|
background-color: #6C5726; |
||||||
|
border-top: 20px dotted #A48E4E; |
||||||
|
height: 200px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.line{ |
||||||
|
background-color: #DCD293; |
||||||
|
padding: 50px 0px 25px 0px; |
||||||
|
width:100%; |
||||||
|
border-top: 20px dotted #A48E4E; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.machineContainer{ |
||||||
|
background-color: #000; |
||||||
|
padding: 5px 1px 5px 1px; |
||||||
|
overflow: hidden; |
||||||
|
height: 135px; |
||||||
|
} |
||||||
|
.slotMachine{ |
||||||
|
width: 32.333333%; |
||||||
|
border: 5px solid #000; |
||||||
|
height: 100px; |
||||||
|
padding: 0px; |
||||||
|
overflow: hidden; |
||||||
|
display: inline-block; |
||||||
|
text-align: center; |
||||||
|
/*margin: 0px 5px;*/ |
||||||
|
/*border: 5px solid #000;*/ |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
.machineResult{ |
||||||
|
color:#fff; |
||||||
|
text-align:center; |
||||||
|
font-weight: 900; |
||||||
|
} |
||||||
|
.noBorder{ |
||||||
|
border:none !important; |
||||||
|
background: transparent !important; |
||||||
|
} |
||||||
|
.slotMachine .slot{ |
||||||
|
height:100px; |
||||||
|
background-position-x: 55%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
.slot1{ |
||||||
|
background-image: url("../img/slot1.png"); |
||||||
|
} |
||||||
|
.slot2{ |
||||||
|
background-image: url("../img/slot2.png"); |
||||||
|
} |
||||||
|
.slot3{ |
||||||
|
background-image: url("../img/slot3.png"); |
||||||
|
} |
||||||
|
.slot4{ |
||||||
|
background-image: url("../img/slot4.png"); |
||||||
|
} |
||||||
|
.slot5{ |
||||||
|
background-image: url("../img/slot5.png"); |
||||||
|
} |
||||||
|
.slot6{ |
||||||
|
background-image: url("../img/slot6.png"); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#textMachine, #textMachine2{ |
||||||
|
width:520px; |
||||||
|
height: 67px; |
||||||
|
overflow: hidden; |
||||||
|
display: inline-block; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
#textMachine > *, #textMachine2 > *{ |
||||||
|
padding: 0px 0px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.slotMachineButton{ |
||||||
|
width:100px; |
||||||
|
height: 100px; |
||||||
|
overflow: hidden; |
||||||
|
display: inline-block; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.slotMachineButton { |
||||||
|
-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1; |
||||||
|
-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1; |
||||||
|
box-shadow:inset 0px 1px 0px 0px #fce2c1; |
||||||
|
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); |
||||||
|
background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% ); |
||||||
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25'); |
||||||
|
background-color:#ffc477; |
||||||
|
border-radius: 75px; |
||||||
|
text-indent:0px; |
||||||
|
border:6px solid #eeb44f; |
||||||
|
display:inline-block; |
||||||
|
color:#ffffff; |
||||||
|
font-size:40px; |
||||||
|
font-weight:bold; |
||||||
|
font-style:normal; |
||||||
|
height:100px; |
||||||
|
line-height:90px; |
||||||
|
margin-top:10px; |
||||||
|
width:100px; |
||||||
|
text-decoration:none; |
||||||
|
text-align:center; |
||||||
|
text-shadow:1px 1px 0px #cc9f52; |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
.slotMachineButton:hover { |
||||||
|
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); |
||||||
|
background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% ); |
||||||
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477'); |
||||||
|
background-color:#fb9e25; |
||||||
|
}.slotMachineButton:active { |
||||||
|
position:relative; |
||||||
|
top:1px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.xxx{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 6.9 KiB |
@ -0,0 +1,25 @@ |
|||||||
|
$(document).ready(function(){ |
||||||
|
var list = [ 4, 2 , 1, 3 ] |
||||||
|
var index = 0 |
||||||
|
var machine = $("#machine4").slotMachine({ |
||||||
|
active : 0, |
||||||
|
delay : 500, |
||||||
|
randomize : function(activeElementIndex){ |
||||||
|
return list[index];
|
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$("#slotMachineButtonShuffle").click(function(){ |
||||||
|
machine.shuffle(); |
||||||
|
$("#slotMachineButtonShuffle").addClass("xxx"); |
||||||
|
setTimeout(() => { |
||||||
|
index ++ |
||||||
|
machine.stop(); |
||||||
|
$("#slotMachineButtonShuffle").removeClass("xxx"); |
||||||
|
}, 1000); |
||||||
|
}); |
||||||
|
|
||||||
|
// $("#slotMachineButtonStop").click(function(){
|
||||||
|
|
||||||
|
// });
|
||||||
|
}); |
||||||
@ -0,0 +1,564 @@ |
|||||||
|
/*! SlotMachine - v2.0.7 - 2014-11-06 |
||||||
|
* https://github.com/josex2r/jQuery-SlotMachine
|
||||||
|
* Copyright (c) 2014 Jose Luis Represa; Licensed MIT */ |
||||||
|
;(function($, window, document, undefined){ |
||||||
|
|
||||||
|
var pluginName = "slotMachine", |
||||||
|
defaults = { |
||||||
|
active : 0, //Active element [int]
|
||||||
|
delay : 200, //Animation time [int]
|
||||||
|
auto : false, //Repeat delay [false||int]
|
||||||
|
randomize : null, //Randomize function, must return an integer with the selected position
|
||||||
|
complete : null, //Callback function(result)
|
||||||
|
//stopHidden : true //Stops animations if the element isn´t visible on the screen
|
||||||
|
}; |
||||||
|
|
||||||
|
var FX_FAST = 'slotMachineBlurFast', |
||||||
|
FX_NORMAL = 'slotMachineBlurMedium', |
||||||
|
FX_SLOW = 'slotMachineBlurSlow', |
||||||
|
FX_GRADIENT = 'slotMachineGradient', |
||||||
|
FX_STOP = FX_GRADIENT; |
||||||
|
|
||||||
|
//Set required styles, filters and masks
|
||||||
|
$(document).ready(function(){ |
||||||
|
|
||||||
|
//Fast blur
|
||||||
|
if( $('filter#slotMachineBlurFilterFast').length<=0 ){ |
||||||
|
$('body').append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0">'+ |
||||||
|
'<filter id="slotMachineBlurFilterFast">'+ |
||||||
|
'<feGaussianBlur stdDeviation="5" />'+ |
||||||
|
'</filter>'+ |
||||||
|
'</svg>'); |
||||||
|
} |
||||||
|
|
||||||
|
//Medium blur
|
||||||
|
if( $('filter#slotMachineBlurFilterMedium').length<=0 ){ |
||||||
|
$('body').append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0">'+ |
||||||
|
'<filter id="slotMachineBlurFilterMedium">'+ |
||||||
|
'<feGaussianBlur stdDeviation="3" />'+ |
||||||
|
'</filter>'+ |
||||||
|
'</svg>'); |
||||||
|
} |
||||||
|
|
||||||
|
//Slow blur
|
||||||
|
if( $('filter#slotMachineBlurFilterSlow').length<=0 ){ |
||||||
|
$('body').append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0">'+ |
||||||
|
'<filter id="slotMachineBlurFilterSlow">'+ |
||||||
|
'<feGaussianBlur stdDeviation="1" />'+ |
||||||
|
'</filter>'+ |
||||||
|
'</svg>'); |
||||||
|
} |
||||||
|
|
||||||
|
//Fade mask
|
||||||
|
if( $('mask#slotMachineFadeMask').length<=0 ){ |
||||||
|
$('body').append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0">'+ |
||||||
|
'<mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">'+ |
||||||
|
'<linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0">'+ |
||||||
|
'<stop stop-color="white" stop-opacity="0" offset="0"></stop>'+ |
||||||
|
'<stop stop-color="white" stop-opacity="1" offset="0.25"></stop>'+ |
||||||
|
'<stop stop-color="white" stop-opacity="1" offset="0.75"></stop>'+ |
||||||
|
'<stop stop-color="white" stop-opacity="0" offset="1"></stop>'+ |
||||||
|
'</linearGradient>'+ |
||||||
|
'<rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeGradient)"></rect>'+ |
||||||
|
'</mask>'+ |
||||||
|
'</svg>'); |
||||||
|
} |
||||||
|
|
||||||
|
//CSS classes
|
||||||
|
$('body').append('<style>' + |
||||||
|
'.' + FX_FAST + '{-webkit-filter: blur(5px);-moz-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);filter: url(#slotMachineBlurFilterFast);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="5")}' + |
||||||
|
'.' + FX_NORMAL + '{-webkit-filter: blur(3px);-moz-filter: blur(3px);-o-filter: blur(3px);-ms-filter: blur(3px);filter: blur(3px);filter: url(#slotMachineBlurFilterMedium);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="3")}' + |
||||||
|
'.' + FX_SLOW + '{-webkit-filter: blur(1px);-moz-filter: blur(1px);-o-filter: blur(1px);-ms-filter: blur(1px);filter: blur(1px);filter: url(#slotMachineBlurFilterSlow);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="1")}' + |
||||||
|
'.' + FX_GRADIENT + '{' + |
||||||
|
'-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(25%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)) );' + |
||||||
|
'mask: url(#slotMachineFadeMask);' + |
||||||
|
'}'+ |
||||||
|
'</style>'); |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
//Required easing functions
|
||||||
|
if(typeof $.easing.easeOutBounce !== 'function'){ |
||||||
|
//From jQuery easing, extend jQuery animations functions
|
||||||
|
$.extend( $.easing, { |
||||||
|
easeOutBounce: function (x, t, b, c, d) { |
||||||
|
if ((t/=d) < (1/2.75)) { |
||||||
|
return c*(7.5625*t*t) + b; |
||||||
|
} else if (t < (2/2.75)) { |
||||||
|
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; |
||||||
|
} else if (t < (2.5/2.75)) { |
||||||
|
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; |
||||||
|
} else { |
||||||
|
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; |
||||||
|
} |
||||||
|
}, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function Timer(fn, delay){ |
||||||
|
var startTime, |
||||||
|
self = this, |
||||||
|
timer, |
||||||
|
_fn = fn, |
||||||
|
_args = arguments, |
||||||
|
_delay = delay; |
||||||
|
|
||||||
|
this.running = false; |
||||||
|
|
||||||
|
this.onpause = function(){}; |
||||||
|
this.onresume = function(){}; |
||||||
|
|
||||||
|
this.cancel = function(){ |
||||||
|
this.running = false; |
||||||
|
clearTimeout(timer); |
||||||
|
}; |
||||||
|
|
||||||
|
this.pause = function(){ |
||||||
|
if( this.running ){ |
||||||
|
delay -= new Date().getTime() - startTime; |
||||||
|
this.cancel(); |
||||||
|
this.onpause(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
this.resume = function(){ |
||||||
|
if( !this.running ){ |
||||||
|
this.running = true; |
||||||
|
startTime = new Date().getTime(); |
||||||
|
|
||||||
|
timer = setTimeout(function(){ |
||||||
|
_fn.apply(self, Array.prototype.slice.call(_args, 2, _args.length)); //Execute function with initial arguments, removing (fn & delay)
|
||||||
|
}, delay); |
||||||
|
|
||||||
|
this.onresume(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
this.reset = function(){ |
||||||
|
this.cancel(); |
||||||
|
this.running = true; |
||||||
|
delay = _delay; |
||||||
|
timer = setTimeout(function(){ |
||||||
|
_fn.apply(self, Array.prototype.slice.call(_args, 2, _args.length)); //Execute function with initial arguments, removing (fn & delay)
|
||||||
|
}, _delay); |
||||||
|
}; |
||||||
|
|
||||||
|
this.add = function(extraDelay){ |
||||||
|
this.pause(); |
||||||
|
delay += extraDelay; |
||||||
|
this.resume(); |
||||||
|
}; |
||||||
|
|
||||||
|
this.resume(); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* @desc PUBLIC - Makes Slot Machine animation effect |
||||||
|
* @param DOM element - Html element |
||||||
|
* @param object settings - Plugin configuration params |
||||||
|
* @return jQuery node - Returns jQuery selector with some new functions (shuffle, stop, next, auto, active) |
||||||
|
*/ |
||||||
|
function SlotMachine(element, options){ |
||||||
|
this.element = element; |
||||||
|
this.settings = $.extend( {}, defaults, options); |
||||||
|
this.defaults = defaults; |
||||||
|
this.name = pluginName; |
||||||
|
|
||||||
|
//jQuery selector
|
||||||
|
this.$slot = $(element); |
||||||
|
//Slot Machine elements
|
||||||
|
this.$tiles = this.$slot.children(); |
||||||
|
//Container to wrap $tiles
|
||||||
|
this.$container = null; |
||||||
|
//Min marginTop offset
|
||||||
|
this._minTop = null; |
||||||
|
//Max marginTop offset
|
||||||
|
this._maxTop = null; |
||||||
|
//First element (the last of the html container)
|
||||||
|
this._$fakeFirstTile = null; |
||||||
|
//Last element (the first of the html container)
|
||||||
|
this._$fakeLastTile = null; |
||||||
|
//Timeout recursive function to handle auto (settings.auto)
|
||||||
|
this._timer = null; |
||||||
|
//Callback function
|
||||||
|
this._oncompleteStack = [ this.settings.complete ]; |
||||||
|
//Number of spins left before stop
|
||||||
|
this._spinsLeft = null; |
||||||
|
//Future result
|
||||||
|
this.futureActive = null; |
||||||
|
//Machine is running?
|
||||||
|
this.isRunning = false; |
||||||
|
//Current active element
|
||||||
|
this.active = this.settings.active; |
||||||
|
|
||||||
|
this.$slot.css("overflow", "hidden"); |
||||||
|
|
||||||
|
//Validate active index
|
||||||
|
if(this.settings.active < 0 || this.settings.active >= this.$tiles.length ){ |
||||||
|
this.settings.active = 0; |
||||||
|
this.active = 0; |
||||||
|
} |
||||||
|
|
||||||
|
//Wrap elements inside $container
|
||||||
|
this.$tiles.wrapAll("<div class='slotMachineContainer' />"); |
||||||
|
this.$container = this.$slot.find(".slotMachineContainer"); |
||||||
|
|
||||||
|
//Set max top offset
|
||||||
|
this._maxTop = - this.$container.height(); |
||||||
|
|
||||||
|
//Add the last element behind the first to prevent the jump effect
|
||||||
|
this._$fakeFirstTile = this.$tiles.last().clone(); |
||||||
|
this._$fakeLastTile = this.$tiles.first().clone(); |
||||||
|
|
||||||
|
this.$container.prepend( this._$fakeFirstTile ); |
||||||
|
this.$container.append( this._$fakeLastTile ); |
||||||
|
|
||||||
|
//Set min top offset
|
||||||
|
this._minTop = - this._$fakeFirstTile.outerHeight(); |
||||||
|
|
||||||
|
//Show active element
|
||||||
|
this.$container.css('margin-top', this.getTileOffset(this.active)); |
||||||
|
|
||||||
|
//Start auto animation
|
||||||
|
if(this.settings.auto !== false){ |
||||||
|
if(this.settings.auto === true){ |
||||||
|
this.shuffle(); |
||||||
|
}else{ |
||||||
|
this.auto(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Get element offset top |
||||||
|
* @param int index - Element position |
||||||
|
* @return int - Negative offset in px |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.getTileOffset = function(index){ |
||||||
|
var offset = 0; |
||||||
|
for(var i=0; i<index; i++){ |
||||||
|
offset += $( this.$tiles.get(i) ).outerHeight(); |
||||||
|
} |
||||||
|
return - offset + this._minTop; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Get current showing element index |
||||||
|
* @return int - Element index |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.getVisibleTile = function(){ |
||||||
|
var firstTileHeight = this.$tiles.first().height(), |
||||||
|
containerMarginTop = parseInt( this.$container.css('margin-top').replace(/px/, ''), 10); |
||||||
|
|
||||||
|
return Math.abs( Math.round( containerMarginTop / firstTileHeight ) ) - 1; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PUBLIC - Changes randomize function |
||||||
|
* @param function|int - Set new randomize function |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.setRandomize = function(rnd){ |
||||||
|
if(typeof rnd === 'number'){ |
||||||
|
var _fn = function(){ |
||||||
|
return rnd; |
||||||
|
}; |
||||||
|
this.settings.randomize = _fn; |
||||||
|
}else{ |
||||||
|
this.settings.randomize = rnd; |
||||||
|
} |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Get random element different than last shown |
||||||
|
* @param boolean cantBeTheCurrent - true||undefined if cant be choosen the current element, prevents repeat |
||||||
|
* @return int - Element index |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.getRandom = function(cantBeTheCurrent){ |
||||||
|
var rnd, |
||||||
|
removePrevious = cantBeTheCurrent || false; |
||||||
|
do{ |
||||||
|
rnd = Math.floor( Math.random() * this.$tiles.length); |
||||||
|
}while((removePrevious && rnd === this.active) && rnd >= 0); |
||||||
|
|
||||||
|
return rnd; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Get random element based on the custom randomize function |
||||||
|
* @return int - Element index |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.getCustom = function(){ |
||||||
|
var choosen; |
||||||
|
if(this.settings.randomize !== null && typeof this.settings.randomize === 'function'){ |
||||||
|
var index = this.settings.randomize.apply(this, [this.active]); |
||||||
|
if(index < 0 || index >= this.$tiles.length){ |
||||||
|
index = 0; |
||||||
|
} |
||||||
|
choosen = index; |
||||||
|
}else{ |
||||||
|
choosen = this.getRandom(); |
||||||
|
} |
||||||
|
return choosen; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Get the previous element |
||||||
|
* @return int - Element index |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.getPrev = function(){ |
||||||
|
var prevIndex = (this.active-1 < 0) ? (this.$tiles.length - 1) : (this.active - 1); |
||||||
|
return prevIndex; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Get the next element |
||||||
|
* @return int - Element index |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.getNext = function(){ |
||||||
|
var nextIndex = (this.active + 1 < this.$tiles.length) ? (this.active + 1) : 0; |
||||||
|
return nextIndex; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Set CSS classes to make speed effect |
||||||
|
* @param string FX_SPEED - Element speed [FX_FAST_BLUR||FX_NORMAL_BLUR||FX_SLOW_BLUR||FX_STOP] |
||||||
|
* @param string||boolean fade - Set fade gradient effect |
||||||
|
*/ |
||||||
|
SlotMachine.prototype._setAnimationFX = function(FX_SPEED, fade){ |
||||||
|
var self = this; |
||||||
|
|
||||||
|
setTimeout(function(){ |
||||||
|
self.$tiles.removeClass(FX_FAST).removeClass(FX_NORMAL).removeClass(FX_SLOW).addClass(FX_SPEED); |
||||||
|
|
||||||
|
if(fade !== true || FX_SPEED === FX_STOP){ |
||||||
|
self.$slot.add(self.$tiles).removeClass(FX_GRADIENT); |
||||||
|
}else{ |
||||||
|
self.$slot.add(self.$tiles).addClass(FX_GRADIENT); |
||||||
|
} |
||||||
|
}, this.settings.delay / 4); |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Reset active element position |
||||||
|
*/ |
||||||
|
SlotMachine.prototype._resetPosition = function(){ |
||||||
|
this.$container.css("margin-top", this.getTileOffset(this.active)); |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Checks if the machine is on the screen |
||||||
|
* @return int - Returns true if machine is on the screen |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.isVisible = function(){ |
||||||
|
//Stop animation if element is [above||below] screen, best for performance
|
||||||
|
var above = this.$slot.offset().top > $(window).scrollTop() + $(window).height(), |
||||||
|
below = $(window).scrollTop() > this.$slot.height() + this.$slot.offset().top; |
||||||
|
|
||||||
|
return !above && !below; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PUBLIC - SELECT previous element relative to the current active element |
||||||
|
* @return int - Returns result index |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.prev = function(){ |
||||||
|
this.futureActive = this.getPrev(); |
||||||
|
this.isRunning = true; |
||||||
|
this.stop(false); |
||||||
|
return this.futureActive; |
||||||
|
};
|
||||||
|
/** |
||||||
|
* @desc PUBLIC - SELECT next element relative to the current active element |
||||||
|
* @return int - Returns result index |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.next = function(){ |
||||||
|
this.futureActive = this.getNext(); |
||||||
|
this.isRunning = true; |
||||||
|
this.stop(false); |
||||||
|
return this.futureActive; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Starts shuffling the elements |
||||||
|
* @param int repeations - Number of shuffles (undefined to make infinite animation |
||||||
|
* @return int - Returns result index |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.shuffle = function( spins, onComplete ){
|
||||||
|
var self = this; |
||||||
|
/* |
||||||
|
if(!this.isVisible() && this.settings.stopHidden === true){ |
||||||
|
return this.stop(); |
||||||
|
} |
||||||
|
*/ |
||||||
|
if(onComplete !== undefined){ |
||||||
|
//this._oncompleteStack.push(onComplete);
|
||||||
|
this._oncompleteStack[1] = onComplete; |
||||||
|
} |
||||||
|
|
||||||
|
this.isRunning = true; |
||||||
|
var delay = this.settings.delay; |
||||||
|
|
||||||
|
if(this.futureActive === null){ |
||||||
|
//Get random or custom element
|
||||||
|
var rnd = this.getCustom(); |
||||||
|
this.futureActive = rnd; |
||||||
|
} |
||||||
|
|
||||||
|
/*if(this.$slot.attr("id")==="machine1") |
||||||
|
console.log(this.futureActive)*/ |
||||||
|
//Decreasing spin
|
||||||
|
if(typeof spins === 'number'){ |
||||||
|
//Change delay and speed
|
||||||
|
switch( spins){ |
||||||
|
case 1: |
||||||
|
case 2: |
||||||
|
this._setAnimationFX(FX_SLOW, true); |
||||||
|
break; |
||||||
|
case 3: |
||||||
|
case 4: |
||||||
|
this._setAnimationFX(FX_NORMAL, true); |
||||||
|
delay /= 1.5; |
||||||
|
break; |
||||||
|
default: |
||||||
|
this._setAnimationFX(FX_FAST, true); |
||||||
|
delay /= 2; |
||||||
|
} |
||||||
|
//Infinite spin
|
||||||
|
}else{ |
||||||
|
//Set animation effects
|
||||||
|
this._setAnimationFX(FX_FAST, true); |
||||||
|
delay /= 2; |
||||||
|
} |
||||||
|
|
||||||
|
//Perform animation
|
||||||
|
this.$container.animate({ |
||||||
|
marginTop : this._maxTop |
||||||
|
}, delay, 'linear', function(){ |
||||||
|
//Reset top position
|
||||||
|
self.$container.css('margin-top', 0); |
||||||
|
|
||||||
|
if(spins - 1 <= 0){ |
||||||
|
self.stop(); |
||||||
|
}else{ |
||||||
|
//Repeat animation
|
||||||
|
self.shuffle(spins - 1); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
return this.futureActive; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Stop shuffling the elements |
||||||
|
* @return int - Returns result index |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.stop = function( showGradient ){ |
||||||
|
if(!this.isRunning){ |
||||||
|
return; |
||||||
|
} |
||||||
|
var self = this; |
||||||
|
|
||||||
|
//Stop animation NOW!!!!!!!
|
||||||
|
this.$container.clearQueue().stop(true, false); |
||||||
|
|
||||||
|
this._setAnimationFX(FX_SLOW, showGradient === undefined ? true : showGradient); |
||||||
|
|
||||||
|
this.isRunning = true; |
||||||
|
|
||||||
|
//Set current active element
|
||||||
|
this.active = this.getVisibleTile(); |
||||||
|
|
||||||
|
//Check direction to prevent jumping
|
||||||
|
if(this.futureActive > this.active){ |
||||||
|
//We are moving to the prev (first to last)
|
||||||
|
if(this.active === 0 && this.futureActive === this.$tiles.length-1){ |
||||||
|
this.$container.css('margin-top', this.getTileOffset(this.$tiles.length) ); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
//We are moving to the next (last to first)
|
||||||
|
if(this.active === this.$tiles.length - 1 && this.futureActive === 0){ |
||||||
|
this.$container.css('margin-top', 0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//Update last choosen element index
|
||||||
|
this.active = this.futureActive; |
||||||
|
this.futureActive = null; |
||||||
|
|
||||||
|
//Get delay
|
||||||
|
var delay = this.settings.delay * 3; |
||||||
|
|
||||||
|
//Perform animation
|
||||||
|
this.$container.animate({ |
||||||
|
marginTop : this.getTileOffset(this.active) |
||||||
|
}, delay, 'easeOutBounce', function (){ |
||||||
|
|
||||||
|
self.isRunning = false; |
||||||
|
|
||||||
|
//Filter callbacks
|
||||||
|
/* |
||||||
|
self._oncompleteStack = Array.prototype.filter.call(self._oncompleteStack, function(fn){ |
||||||
|
return typeof fn === 'function'; |
||||||
|
}); |
||||||
|
//Ececute callbacks
|
||||||
|
Array.prototype.map.call(self._oncompleteStack, function(fn, index){ |
||||||
|
if(typeof fn === 'function'){ |
||||||
|
fn.apply(self, [self.active]); |
||||||
|
self._oncompleteStack[index] = null; |
||||||
|
} |
||||||
|
}); |
||||||
|
*/ |
||||||
|
if(typeof self._oncompleteStack[0] === 'function'){ |
||||||
|
self._oncompleteStack[0].apply(self, [self.active]); |
||||||
|
} |
||||||
|
if(typeof self._oncompleteStack[1] === 'function'){ |
||||||
|
self._oncompleteStack[1].apply(self, [self.active]); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//Disable blur
|
||||||
|
setTimeout(function(){ |
||||||
|
self._setAnimationFX(FX_STOP, false); |
||||||
|
}, delay / 1.75); |
||||||
|
|
||||||
|
return this.active; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @desc PRIVATE - Start auto shufflings, animation stops each 3 repeations. Then restart animation recursively |
||||||
|
*/ |
||||||
|
SlotMachine.prototype.auto = function(){ |
||||||
|
var self = this; |
||||||
|
|
||||||
|
this._timer = new Timer(function(){ |
||||||
|
if(typeof self.settings.randomize !== 'function'){ |
||||||
|
self.futureActive = self.getNext(); |
||||||
|
} |
||||||
|
self.isRunning = true; |
||||||
|
self.shuffle(5, function(){ |
||||||
|
self._timer.reset(); |
||||||
|
}); |
||||||
|
|
||||||
|
}, this.settings.auto);
|
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
* Create new plugin instance if needed and return it |
||||||
|
*/ |
||||||
|
function _getInstance(element, options){ |
||||||
|
var machine; |
||||||
|
if ( !$.data(element[0], 'plugin_' + pluginName) ){ |
||||||
|
machine = new SlotMachine(element, options); |
||||||
|
$.data(element[0], 'plugin_' + pluginName, machine); |
||||||
|
}else{ |
||||||
|
machine = $.data(element[0], 'plugin_' + pluginName); |
||||||
|
} |
||||||
|
return machine; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Chainable instance |
||||||
|
*/ |
||||||
|
$.fn[pluginName] = function(options){ |
||||||
|
if( this.length===1 ){ |
||||||
|
return _getInstance(this, options); |
||||||
|
}else{ |
||||||
|
return this.each(function(){ |
||||||
|
if( !$.data(this, 'plugin_' + pluginName) ){ |
||||||
|
_getInstance(this, options); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
})( jQuery, window, document ); |
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue