如何解决使用 jquery 插件 SpriteSpin 如何在单击按钮时使图像旋转到某个帧?
当使用 sprite spin 插件单击按钮时,我试图让我的图像旋转到某个帧。
这是我正在使用的插件文档 -
http://spritespin.ginie.eu/samples/#/misc-slider
我没有看到内置函数,所以我试图以编程方式操作范围滑块来导航我想要显示的正确图像。
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type='text/javascript'></script>
<script src="https://unpkg.com/spritespin@4.0.11/release/spritespin.js" type="text/javascript"></script>
<div class="spritespin"></div>
<input class="spritespin-slider" type="range">
<button>Click Me</button>
这里是 JS -
$(function() {
$('.spritespin').spritespin({
source: SpriteSpin.sourceArray('/sandBox/sprite/img/gem{frame}.jpg',{ frame: [1,7],digits: 1 }),width: 480,height: 327,sense: 1,animate: false,plugins: [
'360'
],onFrame: function(e,data) {
$('.spritespin-slider').val(data.frame)
},onInit: function(e,data) {
$('.spritespin-slider')
.attr("min",0)
.attr("max",data.source.length - 1)
.attr("value",0)
.on("input",function(e) {
SpriteSpin.updateFrame(data,e.target.value);
})
}
});
});
此时图像随着范围滑块旋转,一切正常。我尝试添加一个点击功能并更新它所做的范围值,但图像根本不旋转和/或更新。当我检查范围输入时,我看到值正在更新,但我猜我需要使用 SpriteSpin.updateFrame 但不知道该怎么做。
这里是我的JS点击函数来更新范围-
var btn = document.querySelector("button");
var slider = document.querySelector("input[type='range']");
btn.addEventListener("click",function(){
slider.value = 3;
});
我总共有 7 张图片,我正在尝试让图片在点击时旋转到第 3 帧。
解决方法
我找到了答案,他们确实提供了 stopFrame 的功能。
frame:0,// Start frame
stopFrame: 3,// End frame
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。