3列滚动抽奖 jquery.slotmachine
效果图:
需引入js文件:
<script src="js/jquery-3.2.0.js"></script>
<script src="js/jquery.slotmachine.js"></script>
html代码:
<div class="draw_wrap">
<dl class="clearfix">
<dd id="machine1" class="mui-pull-left">
<div class="cell">
<img src="data:images/1-1.png" />
</div>
<div class="cell">
<img src="data:images/1-2.png" />
</div>
<div class="cell">
<img src="data:images/1-3.png" />
</div>
</dd>
<dd id="machine2" class="mui-pull-left">
<div class="cell">
<img src="data:images/1-2.png" />
</div>
<div class="cell">
<img src="data:images/1-3.png" />
</div>
<div class="cell">
<img src="data:images/1-1.png" />
</div>
</dd>
<dd id="machine3" class="mui-pull-left">
<div class="cell">
<img src="data:images/1-3.png" />
</div>
<div class="cell">
<img src="data:images/1-1.png" />
</div>
<div class="cell">
<img src="data:images/1-2.png" />
</div>
</dd>
</dl>
<div id="stopBtn" class="stop_btn" data-type="stopBtn"></div>
<div class="result">
<p>未中奖,再接再厉</p>
<a id="alignBtn" class="align_btn" href="#">再来一次</a>
</div>
</div>
</div>
js代码:
$(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 startSlotmachine(){
machine1.shuffle();
machine2.shuffle();
machine3.shuffle();
}
startSlotmachine()
$("#alignBtn").click(function(){
startSlotmachine()
});
$("#stopBtn").click(function(){
if(machine1.isRunning()){
machine1.stop(true);
setTimeout(function(){
setTimeout(machine2.stop(true));
},500)
setTimeout(function(){
setTimeout(machine3.stop(true));
},1000)
}
});
});
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(); 摧毁旋转节点
完整代码:https://github.com/eleven-123/jquery.slotmachine
3列滚动抽奖 jquery.slotmachine的更多相关文章
- js手机号批量滚动抽奖代码实现
我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始 ...
- C#部分---利用arraylist集合做滚动抽奖;
输入多个手机号码,放到集合中,进行三秒钟的滚动抽奖:随机显示号码,清空,再显示: 1.收集号码: 2.每隔三秒进行抽奖,及作弊代码,哈哈哈: 3.System.Threading.Thread.Sle ...
- 一款兼容IE6并带有多图横向滚动的jquery特效
一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...
- 分享一款页面视差滚动切换jquery.localscroll插件
今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...
- 图片文字滚动插件jQuery Scrollbox
图片文字滚动插件jQuery Scrollbox附件中提供了五种图片.文字滚动样式,只需调用jquery库和jQuery Scrollbox插件,然后再加一段简单的jquery代码即可使用,兼容性良好 ...
- 页面动态数据的滚动效果——jquery滚动组件(vticker.js)
<script language="javascript" src="lirms/Test/jquery-1.4.2.js"></script ...
- 整屏滚动效果 jquery.fullPage.js插件+CSS3实现
最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...
- 一个文字无缝滚动的jQuery插件
直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- 1.2.8 Excel做个滚动抽奖
1.首先要准备好数据库: 2.用RAND函数来生成随机数字,做一个辅助列: 3.制作抽奖界面: 4.输入公式: 在F3中输入下列公式并填充至F5: =INDEX(A:A,MATCH(SMALL(B:B ...
随机推荐
- shell脚本将命令的结果赋值给变量的2种写法
Shell 也支持将命令的执行结果赋值给变量,常见的有以下两种方式: variable=`command`variable=$(command) 第一种方式把命令用反引号` `(位于 Esc 键的下方 ...
- Mac电脑最常见的办公软件是什么?Notion for Mac多功能办公笔记软件使用方法
Notion for Mac是一款最新的高效率.办公类软件,相信许多用户在办公的时候需要打开特别多的在线工具,譬如Google Drive.Dropbox Paper.Confluence.GitHu ...
- Oracle实现行转列+Mybatis
1.需求 报表需要动态展示某几个公司分别在几个月内销售额情况(前端表头月份是动态的,月时间段是前端参数来选择的,最大为12个月), 页面展示如下 Oracle数据库中数据如下: 可以看到一个公司的月份 ...
- thinkphp 防止XSS(跨站脚本攻击)
XSS(跨站脚本攻击)可以用于窃取其他用户的Cookie信息,要避免此类问题,可以采用如下解决方案: 直接过滤所有的JavaScript脚本: 转义Html元字符,使用htmlentities.htm ...
- CF 622F (拉格朗日插值)
传送门 解题思路 比较经典的一道题目.第一种方法是差分,就是假设\(k=3\),我们打一个表. 0 1 9 36 100 225 1 8 27 64 125 7 19 37 61 12 18 24 6 ...
- NOIp2018集训test-9-1(pm)
欢乐%你赛,大家都AK了. 1. 小澳的方阵 吸取了前几天的教训,我一往复杂的什么二维树状数组上想就立刻打住阻止自己,就可以发现它是超级大水题了.记录每一行每一列最后一次的修改,对每个格子看它所在行和 ...
- C/C++ Muti-Thread多线程编程学习(之)线程Thread | 创建、运行、结束
文章目录 前言 线程 Thread 创建线程 CreateThread _beginthread _beginthreadex pthread_create 线程运行 结束线程 前言 多线程(Mu ...
- 牛客多校第八场 C CDMA 线性代数:沃尔什矩阵
题意: 构造出一个由1和-1组成的$2^k*2^k$的矩阵,使得矩阵任意两列内积为0 题解: 数学知识,沃尔什矩阵.沃尔什矩阵的特性被CDMA(码分多址)采用,使得编码成为无线信号的频段和振幅之外的第 ...
- CSS3:CSS3 文本效果
ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...
- Game of Taking Stones && POJ1259 /// 最大空凸包 几何+DP
题目大意: 给定n个点 求出这n个点中最大空凸包的面积 只放个模板 一份模板过两题(滑稽 这个讲解够详细了 https://blog.csdn.net/nyroro/article/details/4 ...