前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的 "SlotMachine 组件",浏览一遍下来,勾起了小时候满满的回忆。
下面就带着大家来看看这么一个神奇的组件——SlotMachine 吧。
一、组件预览
先来一发简单的效果压压惊
觉得太简单?别急,好戏在后头,试试手气先。
什么?还没达到想要的效果,好!下面,真实效果来一发。
点击了好长时间,都没有中奖,难怪小时候怎么都赢不了呢。不信邪,继续点击开始,终于有一次中奖的了,真心不容易。
还有我们年终抽奖效果,开始!停止!
二、代码示例
既然是 js 组件,肯定是先要下载组件库。首先贴上 开源地址
然后来看看文件的引用:
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/CSS/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"crossorigin="anonymous">
这里需要注意几点:
1)、引用 jquery 和 bootstrap 都是通过 cdn 加速的方式引用的,不懂 cdn 加速的可以百度。 2)、Jquery 组件必须,并且组件需要 Jquery 2.0 以上版本的支持,版本太低会有 js 异常。 3)、bootstrap 组件并非必须,但是本篇布局需要部分 bootstrap 的样式支持。 4)、toastr 组件并非必须,此处用于显示中奖的结果。 1、试试手气效果代码 html 部分
- <div id="triky">
- <div class="content" style="text-align: center">
- <h1>
- 请选择你想吃的食物
- </h1>
- <div class="row">
- <div style="margin: auto;">
- <div id="triky1">
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/cookie.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/food1.jpg" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/food2.jpg" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/food3.jpg" />
- </div>
- </div>
- <div>
- <div class="btn-group btn-group-justified btn-group-triky" style="margin-left:-15px"
- role="group">
- <div id="trikyShuffle" type="button" class="btn btn-primary btn-lg">
- 试试手气
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="clearfix">
- </div>
- </div>
JS 部分
- $(function () {
- //试试手气
- var triky = $("#triky1").slotMachine({
- active: 2, //初始化的时候显示的项的索引
- //delay: 150,//切换两张图片的间隔时间(毫秒单位)
- //randomize: function () {
- // return 0;//每次旋转后选中值的索引(从0开始)
- //}
- });
- $("#trikyShuffle").click(function () {
- triky.shuffle(8);//开始旋转方法,参数8表示每次旋转跳过8个图标
- });
- });
JS 常用属性、方法、事件详解
(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 id="randomize">
- <div class="content container" style="text-align: center;max-width: 900px;">
- <h1>
- 简易游戏机
- </h1>
- <div class="row">
- <div class="col-xs-4">
- <div>
- <div id="machine1" class="randomizeMachine">
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot1.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot2.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot3.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot4.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot5.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot6.png" />
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-4">
- <div>
- <div id="machine2" class="randomizeMachine">
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot1.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot2.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot3.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot4.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot5.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot6.png" />
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-4">
- <div>
- <div id="machine3" class="randomizeMachine">
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot1.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot2.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot3.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot4.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot5.png" />
- </div>
- <div>
- <img src="/Content/jQuery-SlotMachine-master/img/slot6.png" />
- </div>
- </div>
- </div>
- </div>
- </div>
- <div>
- <div class="btn-group btn-group-justified btn-group-randomize" role="group">
- <div id="ranomizeButton" type="button" class="btn btn-danger btn-lg">
- 开始
- </div>
- </div>
- </div>
- </div>
- </div>
JS 部分
- $(function () {
- //简易游戏机
- var machine1 = $("#machine1").slotMachine({
- active: 0,
- delay: 500
- });
- var machine2 = $("#machine2").slotMachine({
- 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, onComplete);
- }, 1000);
- })
- });
3、单个停止效果代码示例 Html 部分
- <div id="casino" style="padding-top:50px;">
- <div class="content">
- <h1>
- 抽奖
- </h1>
- <div>
- <div id="casino1" 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="casino2" 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="casino3" 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 class="btn-group btn-group-justified btn-group-casino" role="group">
- <div id="slotMachineButtonShuffle" type="button" class="btn btn-primary btn-lg">
- 开始
- </div>
- <div id="slotMachineButtonStop" type="button" class="btn btn-primary btn-lg">
- 停止
- </div>
- </div>
- </div>
- </div>
- <div class="clearfix">
- </div>
- </div>
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--;
- });
- });
三、总结 整个过程并不复杂,所有的属性、事件、方法基本看看文档都能很好理解运用,演示代码也没什么好说的,一看就懂,希望对大家学习 javascript 组件有所帮助。
来源: http://www.phperz.com/article/17/0408/266275.html