拓展jquery.slotmachine.js，设置停止位置

最新推荐文章于 2024-06-11 09:32:53 发布
最新推荐文章于 2024-06-11 09:32:53 发布
阅读量5k 收藏 3
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29066959/article/details/51831809
版权

 

1.介绍：jquery.slotmachine.js是实现老虎机抽奖功能的插件；

 

2.使用方法：在页面中引用该js,并调用其中接口

 调用slotMachine接口，设置

最低0.47元/天 解锁文章
YokoH2L
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
jQuery摇一摇插件slotmachine.js
05-30
jQuery摇一摇插件slotmachine.js 包括jQuery库后的脚本： <script src="/path/to/jquery.slotmachine.js"> 使用用法 创建本机： var machine = $(foo).slotMachine( params ); 随机： machine.shuffle( repeat, ...
jQuery老虎机插件slotmachine.zip
07-04
jQuery老虎机插件slotmachine里面包含三种不同抽奖效果的老虎机jquery.slotmachine插件。
jquery-slotmachine控制停到指定位置方法
weixin_41587194的博客
02-05 1016
jquery-slotmachine是一个实现类似老虎机抽奖的插件，默认的配置不能控制停到指定位置 但是futureActive这个属性就是最后的结果，在结束之前只需要设定一个值就可以进行控制 在自己写的页面里添加 window.SlotMachine.prototype.setResult = function (num) { this.futureActive = num; }...
探索Vue-SlotMachine：打造个性化的虚拟老虎机游戏
最新发布
gitblog_00055的博客
06-11 945
探索Vue-SlotMachine：打造个性化的虚拟老虎机游戏 项目地址:https://gitcode.com/guahsu/Vue-SlotMachine 在寻找一个有趣且富有创意的技术项目来展示你的Vue.js技能吗？Vue-SlotMachine是一个绝佳的选择。这个开源项目是一个基于Vue和CSS的虚拟老虎机游戏，让你能够轻松地创建自己的在线娱乐体验。 项目介绍 Vue-SlotMac...
jQuery-SlotMachine-master
weixin_30895603的博客
04-10 138
jQuery 的 老虎machine插件 转载于:https://www.cnblogs.com/godrain/p/4413924.html
3列滚动抽奖 jquery.slotmachine
weixin_34198453的博客
03-01 293
效果图： 需引入js文件: <script src="js/jquery-3.2.0.js"></script> <script src="js/jquery.slotmachine.js"></script> html代码： <div class="draw_wrap"> <dl cla...
jquery实现移动端slotmachine抽奖游戏，中奖后并弹出地址填写框
weixin_30662539的博客
03-21 387
项目中需要写一个抽奖的移动端的小游戏，于是就在网上找了一下插件，然后自己改动了一些样式，以下代码段仅供个人学习参考，非100%原创，有问题的地方可以提出来哦 页面效果： 以下分别为html+css+js代码： 先引用这几个文件： <script type="text/javascript" src="js/jquery.min.js"></script>&l...
josex2r-jQuery-SlotMachine.rar
05-30
老虎机特效的jQuery插件
jQuery老虎机-，抽奖可直接用于项目中
02-18
jquery.slotmachine.js 制作的。 3排3列为一组。
js组件slotmachine_jQuery摇一摇插件slotmachine.js
weixin_39535283的博客
12-22 332
插件描述：一个简单的，轻量级的jQuery插件，摇一摇的动画效果。安装包括jQuery库后的脚本：使用用法创建本机：varmachine=$(foo).slotMachine(params);随机：machine.shuffle(repeat,onStopCallback);//没有参数，使旋转无限更改选定的元素：machine.prev();//Previouselemen...
js组件SlotMachine实现图片切换效果制作抽奖系统
11-24
前言：前两天在网上找组件，无意中发现了我们儿时游戏机效果的“SlotMachine组件”，浏览一遍下来，勾起了小时候满满的回忆。 下面就带着大家来看看这么一个神奇的组件——SlotMachine吧。 一、组件预览 先来一发简单的效果压压惊 觉得太简单？别急，好戏在后头，试试手气先。 什么？还没达到想要的效果，好！下面，真实效果来一发。 点击了好长时间，都没有中奖，难怪小时候怎么都赢不了呢。不信邪，继续点击开始，终于有一次中奖的了，真心不容易。 还有我们年终抽奖效果，开始！停止！ 二、代码示例 既然是js组件，肯定是先要下载组件库。首先贴上 开源地址 然后来看看文件的引用： 复制代码
jQuery常用API
qq_43495846的博客
03-10 243
jQuery的特点 优质的选择器和筛选器 方便的隐士迭代 强大的链式编程 引入方法 必须下载导入jQuery包 也就是：jquery.js 或者 jquer.min.js jQuery的选择器 选择器——用来获取DOM元素的方法 匹配id属性的属性值 匹配clss属性的属性值，也就是类名 匹配标签名称 匹配标签结构 匹配属性属性值选择器 匹配组合选择器 匹配结构伪类选择器 jQuery的筛...
使用CDN加载Jquery等JS库
先锋WEB技术
01-09 5587
在网页中我们经常使用jQuery库，选择使用的jQuery加载源，能有效加快网站的加载速度，目前推荐使用新浪、Google或Microsoft提供的CDN jQuery源，当然，他们还都提供了其他js库。作为国内的网站来说当然首推新浪的公共资源服务(Public Resources)，速度上更有优势。而且新浪提供了不少JS资源，具体可以去http://lib.sinaapp.com查看。Googl
jquery如何设置控件位置
我的地盘
08-29 4161
http://blog.sina.com.cn/s/blog_4ed18f290100nuae.html 纯JS写法：     document.getElementById("child").style.left="800px";     document.getEl
jq 实现老虎机抽奖
陈大文的博客
08-19 593
1.首先，得下载jquery.slotmachine.js的文件引入 2.调用： var machine1 = $(".machine1").slotMachine({ active : 0, delay : 500 }); var machine2 = $(".machine2").slotMachine({ active : 0, del...
jQuery中stop()无法停止delay()造成动画叠加的解决办法
weixin_33895604的博客
09-21 195
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3实现图片拉霸机代码
06-09
以下是一个简单的 Vue3 图片拉霸机示例代码： ``` <template> <div class="slotmachine"> <div class="slotmachine-container"> <div class="slotmachine-image" v-for="(image, index) in images" :key="index" :style="{ transform: 'translateY(' + (imagePosition - index * imageHeight) + 'px)' }"> <img :src="image" /> </div> </div> <div class="slotmachine-controls"> <button @click="start">Start</button> <button @click="stop">Stop</button> </div> </div> </template> <script> import { reactive, ref } from 'vue'; export default { setup() { const images = reactive([ 'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', ]); const imageHeight = 100; const imagePosition = ref(0); let intervalId = null; const start = () => { clearInterval(intervalId); intervalId = setInterval(() => { imagePosition.value += imageHeight; }, 100); }; const stop = () => { clearInterval(intervalId); const position = Math.round(imagePosition.value / imageHeight) * imageHeight; imagePosition.value = position; }; return { images, imageHeight, imagePosition, start, stop, }; }, }; </script> <style> .slotmachine { display: flex; flex-direction: column; align-items: center; } .slotmachine-container { width: 100px; height: 300px; overflow: hidden; } .slotmachine-image { width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; } .slotmachine-image img { width: 80%; height: 80%; object-fit: contain; } .slotmachine-controls { margin-top: 20px; } .slotmachine-controls button { margin-right: 10px; } </style> ``` 这个示例代码中，我们使用了 Vue3 中的 `reactive` 和 `ref` 方法来定义响应式数据，使用了 `setup` 函数来编写逻辑代码，并在模板中使用了动态绑定和计算属性来实现图片的滚动和停止。同时，我们使用了 CSS 来设置图片和容器的样式，以便它们在组件中正确地显示。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值