前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的“SlotMachine组件”,浏览一遍下来,勾起了小时候满满的回忆。
下面就带着大家来看看这么一个神奇的组件——SlotMachine吧。
一、组件预览
先来一发简单的效果压压惊
觉得太简单?别急,好戏在后头,试试手气先。
点击了好长时间,都没有中奖,难怪小时候怎么都赢不了呢。不信邪,继续点击开始,终于有一次中奖的了,真心不容易。
还有我们年终抽奖效果,开始!停止!
二、代码示例
然后来看看文件的引用:
@H_301_43@
这里需要注意几点:
1)、引用jquery和bootstrap都是通过CDN加速的方式引用的,不懂CDN加速的可以百度。 2)、Jquery组件必须,并且组件需要Jquery 2.0以上版本的支持,版本太低会有js异常。 3)、bootstrap组件并非必须,但是本篇布局需要部分bootstrap的样式支持。 4)、toastr组件并非必须,此处用于显示中奖的结果。 1、试试手气效果代码 html部分
<div class="jb51code">
<pre class="brush:xhtml;">
<div id="triky">
<div class="content" style="text-align: center">
请选择你想吃的食物
<div class="row">
<div style="margin: auto;">
<div id="triky1">




<div class="clearfix">@H_30143@
@H301_43@
JS部分
<div class="jb51code">
<pre class="brush:js;">
$(function () {
//试试手气
var triky = $("#triky1").slotMachine({
active: 2,//初始化的时候显示的项的索引
//delay: 150,//切换两张图片的间隔时间(毫秒单位)
//randomize: function () {
// return 0;//每次旋转后选中值的索引(从0开始)
//}
});
$("#trikyShuffle").click(function () {
triky.shuffle(8);//开始旋转方法,参数8表示每次旋转跳过8个图标
});
});
(1)初始化方法 var machine = $("#id").slotMachine({}); 返回当前旋转的对象。slotMachine()方法里面传递初始化的参数,比如
active:表示初始化的时候显示项的索引,从0开始 delay:切换两张图片的间隔时间(毫秒单位) auto:是否自动旋转,取值为true or false spins:当auto为true的时候,这是每次跳过图标的个数 stophidden:是否出现开始和停止时候的动画 randomize:function(activeElementIndex){}此属性表示每次旋转后选中值的索引(从0开始) direction:动画的方向,取值(up||down) (2)常用方法
machine.shuffle( repeat,onStopCallback ); 表示开始旋转,repeat表示每次跳过的图片个数;onstopCallback表示旋转停止后的事件回调方法。 machine.prev(); 返回前一个元素 machine.next(); 返回后一个元素 machine.stop(); 停止旋转 machine.active; 得到选中的元素的索引 machine.running; 检测是否正在旋转,true表示正在旋转 machine.stopping; 检测是否已经停止 machine.destroy(); 摧毁旋转节点 2、简单游戏机效果代码示例 html部分
<div class="jb51code">
<pre class="brush:xhtml;">
<div id="randomize">
<div class="content container" style="text-align: center;max-width: 900px;">
简易游戏机
<div class="row">
<div class="col-xs-4">






<div class="col-xs-4">






<div class="col-xs-4">






JS部分
active: 1,delay: 500,direction: 'down'
});
var machine3 = $("#machine3").slotMachine({
active: 2,delay: 500
});
var arr = [];
function onComplete(active) {
if (arr.length <= 1) {
arr.push(active);
}
else if (arr.length > 1) {
arr.push(active);
if (arr[0] == arr[1] && arr[1] == arr[2]) {
toastr.success("恭喜你中奖了!");
}
else if (arr[0] == arr[1] || arr[0] == arr[2] || arr[1] == arr[2]) {
toastr.success("还差一点,继续加油");
}
else {
toastr.success("手气不行");
}
arr = [];
}
}
$("#ranomizeButton").click(function () {
machine1.shuffle(5,onComplete);
setTimeout(function () {
machine2.shuffle(5,onComplete);
},500);
setTimeout(function () {
machine3.shuffle(5,1000);
})
});
<div id="casino2" class="slotMachine">
<div class="slot slot1">@H_30143@
<div class="slot slot2">@H30143@
<div class="slot slot3">@H30143@
<div class="slot slot4">@H30143@
<div class="slot slot5">@H30143@
<div class="slot slot6">@H30143@
@H301_43@
<div id="casino3" class="slotMachine">
<div class="slot slot1">@H_30143@
<div class="slot slot2">@H30143@
<div class="slot slot3">@H30143@
<div class="slot slot4">@H30143@
<div class="slot slot5">@H30143@
<div class="slot slot6">@H30143@
@H301_43@
<div class="btn-group btn-group-justified btn-group-casino" role="group">
<div id="slotMachineButtonShuffle" type="button" class="btn btn-primary btn-lg">开始@H_30143@
<div id="slotMachineButtonStop" type="button" class="btn btn-primary btn-lg">停止@H30143@
@H30143@
@H301_43@
@H_30143@
<div class="clearfix">@H30143@
@H301_43@
JS部分
<div class="jb51code">
<pre class="brush:js;">
$(function () {
//单个停止
var machine4 = $("#casino1").slotMachine({
active: 0,delay: 500
});
var machine5 = $("#casino2").slotMachine({
active: 1,delay: 550
});
machine6 = $("#casino3").slotMachine({
active: 2,delay: 600
});
var started = 0;
$("#slotMachineButtonShuffle").click(function () {
started = 3;
machine4.shuffle();
machine5.shuffle();
machine6.shuffle();
});
$("#slotMachineButtonStop").click(function () {
switch (started) {
case 3:
machine4.stop();
break;
case 2:
machine5.stop();
break;
case 1:
machine6.stop();
break;
}
started--;
});
});