以下是 jQuery老虎机插件slotmachine js代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
部分效果截图3:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery�ϻ������slotmachine</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2.0">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/jquery.slotmachine.js"></script>
</head>
<body>
<div class="line">
<div class="content" style="text-align: center">
<div style="clear:both;">
<p class="title">Randomize your machines: </p>
<p class="title">Randomize your machines: </p>
</div>
<div style="clear:both;">
<div id="machine1" class="slotMachine">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="machine2" class="slotMachine">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="machine3" class="slotMachine">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="slotMachineButton1" class="slotMachineButton">GO!</div>
<script>
$(document).ready(function(){
var machine1 = $("#machine1").slotMachine({
active : 0,
delay : 500
});
var machine2 = $("#machine2").slotMachine({
active : 1,
delay : 500
});
var machine3 = $("#machine3").slotMachine({
active : 2,
delay : 500
});
function onComplete($el, active){
switch($el[0].id){
case 'machine1':
$("#machine1Result").text("Index: "+active.index);
break;
case 'machine2':
$("#machine2Result").text("Index: "+active.index);
break;
case 'machine3':
$("#machine3Result").text("Index: "+active.index);
break;
}
}
$("#slotMachineButton1").click(function(){
machine1.shuffle(3, onComplete);
setTimeout(function(){
machine2.shuffle(3, onComplete);
}, 500);
setTimeout(function(){
machine3.shuffle(3, onComplete);
}, 1000);
})
});
</script>
</div>
<div style="clear:both;">
<div id="machine1Result" class="slotMachine noBorder" style="text-align:left">Index: 0</div>
<div id="machine2Result" class="slotMachine noBorder" style="text-align:left">Index: 1</div>
<div id="machine3Result" class="slotMachine noBorder" style="text-align:left">Index: 2</div>
<div class="slotMachine noBorder"></div>
</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;">
<div style="clear:both">
<p class="title">Feel free to build your ouw casino! </p>
</div>
<div style="clear:both; margin-top: 250px;">
<div id="machine4" class="slotMachine" style="margin-left: -65px;">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="machine5" class="slotMachine">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="machine6" class="slotMachine">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<script>
$(document).ready(function(){
var machine4 = $("#machine4").slotMachine({
active : 0,
delay : 500
});
var machine5 = $("#machine5").slotMachine({
active : 1,
delay : 500
});
window.machine6 = $("#machine6").slotMachine({
active : 2,
delay : 500
});
$("#slotMachineButtonShuffle").click(function(){
machine4.shuffle();
machine5.shuffle();
machine6.shuffle();
});
$("#slotMachineButtonStop").click(function(){
if( machine4.isRunning() ){
//True to stop now
machine4.stop(true);
}else{
if( machine5.isRunning() ){
machine5.stop(true);
}else{
if( machine6.isRunning() ){
machine6.stop(true);
}
}
}
});
});
</script>
</div>
</div>
<div class="content" style="padding-left:500px; margin-top:-60px">
<div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px">Shuffle!</div>
<div id="slotMachineButtonStop" class="slotMachineButton" style="font-size: 25px">Stop!</div>
</div>
</div>
<div class="line">
<div class="content" style="text-align: center">
<div style="clear:both;">
<p class="title">Or simply use it like a slide: </p>
</div>
<div style="clear:both;">
<div id="slotMachineButtonPrev" class="slotMachineButton" style="font-size: 30px; margin-left: 0px">PREV</div>
<div id="machine7" class="slotMachine" style="margin-left:50px">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="slotMachineButtonNext" class="slotMachineButton" style="font-size: 30px">NEXT</div>
<script>
$(document).ready(function(){
var machine7 = $("#machine7").slotMachine({
active : 0,
delay : 500
});
$("#slotMachineButtonPrev").click(function(){
machine7.prev();
});
$("#slotMachineButtonNext").click(function(){
machine7.next();
});
});
</script>
</div>
</div>
</div>
</body>
</html>
JS代码(jquery.slotmachine.js):
/* * jQuery Slot Machine v1.0.0 * https://github.com/josex2r/jQuery-SlotMachine * * Copyright 2014 Jose Luis Represa * Released under the MIT license*/
(function($){
//Set required styles,filters and masks$(document).ready(function(){
//Fast blurif( $("filter#slotMachineBlurSVG").length<=0 ){
$("body").append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg">'+'<filter id="slotMachineBlurFilterFast">'+'<feGaussianBlur stdDeviation="5" />'+'</filter>'+'</svg>');
}
//Medium blurif( $("filter#slotMachineBlurSVG").length<=0 ){
$("body").append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg">'+'<filter id="slotMachineBlurFilterMedium">'+'<feGaussianBlur stdDeviation="3" />'+'</filter>'+'</svg>');
}
//Slow blurif( $("filter#slotMachineBlurSVG").length<=0 ){
$("body").append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg">'+'<filter id="slotMachineBlurFilterSlow">'+'<feGaussianBlur stdDeviation="1" />'+'</filter>'+'</svg>');
}
//Fade maskif( $("mask#slotMachineFadeSVG").length<=0 ){
$("body").append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg">'+'<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>"+".slotMachineBlurFast{
-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')}
"+".slotMachineBlurMedium{
-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')}
"+".slotMachineBlurSlow{
-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')}
"+".slotMachineGradient{
"+"-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 functionsif( 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;
}
}
,}
);
}
/** * @desc PUBLIC - Makes Slot Machine animation effect * @param object settings - Plugin configuration params * @return jQuery node - Returns jQuery selector with some new functions (shuffle,stop,next,auto,active)*/
$.fn.slotMachine = function(settings){
var defaults ={
active:0,//Active element [int]delay:200,//Animation time [int]repeat:false //Repeat delay [false||int]}
;
settings = $.extend(defaults,settings);
//Plugin settingsvar$slot = $(this),//jQuery selector$titles = $slot.children(),//Slot Machine elements$container,//Container to wrap $titles_maxTop,//Max marginTop offset_timer = null,//Timeout recursive function to handle auto (settings.repeat)_currentAnim = null,//Current playing jQuery animation_forceStop = false,//Force execution for some functions_oncompleteShuffling = null,//Callback function_isRunning = false,//Machine is running?_active ={
//Current active elementindex:settings.active,el:$titles.get( settings.active )}
;
/** * @desc PRIVATE - Get element offset top * @param int index - Element position * @return int - Negative offset in px*/
function _getOffset( index ){
var offset = 0;
for(var i=0;
i<index;
i++){
offset += $( $titles.get(i) ).outerHeight();
}
return -offset;
}
/** * @desc PRIVATE - Get random element different than last shown * @return object - Element index and HTML node*/
function _getRandom(){
var rnd;
do{
rnd = Math.floor( Math.random() * $titles.length );
}
while( rnd===_active.index && rnd>=0 );
//Choose elementvar choosen ={
index:rnd,el:$titles.get( rnd )}
;
return choosen;
}
/** * @desc PRIVATE - Get currently active element * @return object elWithIndex - Element index and HTML node*/
function _getActive(){
//Update last choosen element indexreturn _active;
}
/** * @desc PRIVATE - Set currently showing element and makes active * @param object elWithIndex - Element index and HTML node*/
function _setActive( elWithIndex ){
//Update last choosen element index_active = elWithIndex;
}
/** * @desc PRIVATE - Get the previous element * @return int - Element index and HTML node*/
function _getPrev(){
var prevIndex = _active.index-1<0 ? $titles.length-1:_active.index-1;
var prevObj ={
index:prevIndex,el:$titles.get(prevIndex)}
;
return prevObj;
}
/** * @desc PRIVATE - Get the next element * @return int - Element index and HTML node*/
function _getNext(){
var nextIndex = _active.index+1<$titles.length ? _active.index+1:0;
var nextObj ={
index:nextIndex,el:$titles.get(nextIndex)}
;
return nextObj;
}
/** * @desc PRIVATE - Set CSS classes to make speed effect * @param string speed - Element speed [fast||medium||slow] * @param string||boolean fade - Set fade gradient effect*/
function _setAnimationFX(speed,fade){
$slot.add($titles).removeClass("slotMachineBlurFast slotMachineBlurMedium slotMachineBlurSlow");
switch( speed ){
case 'fast':$titles.addClass("slotMachineBlurFast");
break;
case 'medium':$titles.addClass("slotMachineBlurMedium");
break;
case 'slow':$titles.addClass("slotMachineBlurSlow");
break;
}
if( fade!==true || speed==="stop" ){
$slot.add($titles).removeClass("slotMachineGradient");
}
else{
$slot.add($titles).addClass("slotMachineGradient");
}
}
/** * @desc PRIVATE - Reset active element position*/
function _resetPosition(){
$container.css("margin-top",_getOffset(_active.index));
}
/** * @desc PRIVATE - Starts shuffling the elements * @param int count - Number of shuffles (undefined to make infinite animation*/
function _shuffle( count ){
_isRunning = true;
var delay = settings.delay;
//Infinite animationif( count===undefined ){
//Set animation effects_setAnimationFX("fast",true);
delay /= 2;
if( _isVisible() ){
//Perform animation_currentAnim = $container.animate({
marginTop:_maxTop}
,delay,function(){
//Remove animation var_currentAnim = null;
//Reset top position$container.css("margin-top",0);
}
);
}
else{
_setAnimationFX("stop");
_resetPosition();
}
//Oncomplete animationsetTimeout(function(){
if( _forceStop===false ){
//Repeat animation_shuffle();
}
}
,delay + 25);
//Stop animation after{
count}
repeats}
else{
//Perform fast animationif( count>=1 ){
if( count>1 ){
//Set animation effects_setAnimationFX("fast",true);
delay /= 2;
}
else{
//Set animation effects_setAnimationFX("medium",true);
}
if( _isVisible() ){
//Perform animation_currentAnim = $container.animate({
marginTop:_maxTop}
,delay,function(){
//Remove animation var_currentAnim = null;
//Reset top position$container.css("margin-top",0);
}
);
}
else{
_setAnimationFX("stop");
_resetPosition();
}
//Oncomplete animationsetTimeout(function(){
//Repeat animation_shuffle( count-1 );
}
,delay + 25);
}
else{
//Stop NOW!_stop(true);
}
}
}
/** * @desc PRIVATE - Perform Shuffling calback*/
function completeCallback(){
if( typeof _oncompleteShuffling==="function" ){
_oncompleteShuffling($slot,_active);
_oncompleteShuffling = null;
}
}
/** * @desc PRIVATE - Stop shuffling the elements * @param int||boolean nowOrRepeations - Number of repeations to stop (true to stop NOW)*/
function _stop( nowOrRepeations,getElementFn ){
//Stop animationif( _currentAnim!==null ){
_currentAnim.stop();
}
//Get elementvar rnd;
if( typeof getElementFn==="function" ){
rnd = getElementFn();
}
else{
if( settings.repeat ){
rnd = _getNext();
}
else{
rnd = _getRandom();
}
}
//Stop animation NOW!!!!!!!if( nowOrRepeations===true || nowOrRepeations<=1 ){
_setAnimationFX("slow",true);
//get random element offsetvar offset = _getOffset(rnd.index);
//Exception:first elementif( rnd.index===0 ){
$container.css("margin-top",-$( rnd.el ).height() / 2 );
}
var delay = 75 * $titles.length - rnd.index;
if( _isVisible() ){
_setActive( rnd );
//Perform animation$container.animate({
marginTop:offset}
,delay,"easeOutBounce",completeCallback);
}
else{
_setAnimationFX("stop");
_resetPosition();
}
//Oncomplete animationsetTimeout(function(){
_setAnimationFX("stop");
_isRunning = false;
}
,delay + 25);
//Stop animation sloooooooowly}
else{
_shuffle(nowOrRepeations || 3);
}
}
/** * @desc PRIVATE - Checks if the machine is on the screen * @return int - Returns true if machine is on the screen*/
function _isVisible(){
//Stop animation if element is [above||below] screen,best for performancevar above = $slot.offset().top > $(window).scrollTop() + $(window).height(),below = $(window).scrollTop() > $slot.height() + $slot.offset().top;
return !above && !below;
}
/** * @desc PRIVATE - Start auto shufflings,animation stops each 3 repeations. Then restart animation recursively*/
function _auto( delay ){
if( _forceStop===false ){
delay = delay===undefined ? 1:settings.repeat + 1000;
_timer = setTimeout(function(){
if( _forceStop===false ){
_shuffle(3);
}
_timer = _auto( delay );
}
,delay);
}
}
$slot.css("overflow","hidden");
//Wrap elements inside $container$titles.wrapAll("<div class='slotMachineContainer' />");
$container = $slot.find(".slotMachineContainer");
//Set max top offset_maxTop = - $container.height();
//Show active element$container.css("margin-top",_getOffset(settings.active) );
//Start auto animationif( settings.repeat!==false ){
_auto();
}
//Public methods/** * @desc PUBLIC - Starts shuffling the elements * @param int count - Number of shuffles (undefined to make infinite animation*/
$slot.shuffle = function( count,oncomplete ){
_forceStop = false;
_oncompleteShuffling = oncomplete;
_shuffle(count);
}
;
/** * @desc PUBLIC - Stop shuffling the elements * @param int||boolean nowOrRepeations - Number of repeations to stop (true to stop NOW)*/
$slot.stop = function( nowOrRepeations ){
_forceStop = true;
if( settings.repeat!==false && _timer!==null ){
clearTimeout(_timer);
}
_stop(nowOrRepeations);
}
;
/** * @desc PUBLIC - SELECT previous element relative to the current active element*/
$slot.prev = function(){
_stop(true,_getPrev);
}
;
/** * @desc PUBLIC - SELECT next element relative to the current active element*/
$slot.next = function(){
_stop(true,_getNext);
}
;
/** * @desc PUBLIC - Get selected element * @return object - Element index and HTML node*/
$slot.active = function(){
return _getActive();
}
;
/** * @desc PUBLIC - Check if the machine is doing stuff * @return boolean - Machine is shuffling*/
$slot.isRunning = function(){
return _isRunning;
}
;
/** * @desc PUBLIC - Start auto shufflings,animation stops each 3 repeations. Then restart animation recursively*/
$slot.auto = _auto;
return $slot;
}
;
}
)(jQuery);
CSS代码(style.css):
@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;}
/* General ID-------------------------------------------------------------------------*/
.wrapper{width:960px;margin:120px auto 0;}
.wrapper_inner{width:960px;margin:0 auto 0;}
.wrapper.margin1{width:960px;margin:70px auto 0;}
.wrapper.foot{width:960px;margin:0 auto 0;}
.content{padding:30px;width:900px;margin:0 auto;}
.content.foot{padding:0 30px;float:inherit;margin:0 auto 0;width:900px;margin-bottom:0;}
/* Titulos-------------------------------------------------------------------------*/
h1{float:left;width:288px;height:73px;}
h1 a{float:left;width:288px;height:73px;background:url(../img/logo_menu.jpg) no-repeat 0 0;}
h1 a span{display:none;}
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;top:0px;background-color:#6C5726;overflow:hidden;position:relative;padding:50px 0px;}
#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;border-top:10px solid #A48E4E;border-bottom:10px solid #A48E4E;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:75px 0px;width:100%;border-top:20px dotted #A48E4E;}
#textMachine,#textMachine2{width:520px;height:67px;overflow:hidden;display:inline-block;text-align:center;}
#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:50px;font-weight:bold;font-style:normal;height:100px;line-height:100px;width:100px;text-decoration:none;text-align:center;text-shadow:1px 1px 0px #cc9f52;margin-left:50px;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;}
.slotMachine{width:100px;height:100px;overflow:hidden;display:inline-block;text-align:center;border:5px solid #000;background-color:#ffffff;}
.noBorder{border:none !important;background:transparent !important;}
.slotMachine .slot{width:100px;height:100px;}
.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");}
分享到QQ
分享到微博
微信扫一扫
