jQuery Mobile 滑块图像序列答案

【问题标题】：jQuery Mobile Sliders Image SequencesjQuery Mobile 滑块图像序列
【发布时间】：2013-03-04 13:20:01
【问题描述】：

我正在构建一个使用 jQuery Mobile 框架在智能手机上显示医学图像的移动应用程序。我有多个图像（有时超过 100 个），我想在单个画布上显示，我想使用滑块尽可能流畅地浏览图像，因为它们是创建动画的系列的一部分。

目前，我已经使用下面的代码做到了这一点，但是当从图像滑到另一个图像时并不顺畅，并且存在滞后。您必须将其移动到特定索引处才能显示图像，然后移动到下一个，因为在您滑动值时它不会显示它。

我的另一个选择是将所有图像放在 img 标记中，并在您使用幻灯片浏览数组索引时隐藏/显示它们。但我想在某些时候使用画布来缩放/过滤图像。

任何想法、插件/库都会非常有帮助。

var a=document.getElementById("myCanvas");
var a_ctx=a.getContext("2d");

var images = [];

$("#slider").attr("max", instUrlArr.length).slider("refresh");

//on page init it will preload all images from array
for(var i = 0;i<instUrlArr.length;i++){
    images[i] = new Image();
    images[i].src = instUrlArr[i];
}
$('#slider').slider({
        stop: function(event,ui){
        var sliderVal = $('#slider').val();
        var img = images[sliderVal];
        console.log('source ' + img.src);

        a_ctx.drawImage(img,400,300);
    }
});

【问题讨论】：

试试这个tympanus.net/codrops/2010/05/27/…
@Omar 感谢您的链接。我已经将 PhotoSwipe 用于效果很好的原型，但我希望能够在图像上缩放/添加滤镜效果并使用滑块而不是按钮。画布似乎是最佳选择。
这个不同于photoswipe，可以轻松修改。

标签： jquery jquery-mobile slider html5-canvas

【解决方案1】：

我设法通过使用更改事件而不是使用滑块开始/停止事件来解决这个问题。当我在图像中滑动时，它们会从一张平滑地绘制到另一张。

$('#slider').change(function(){
    var sliderVal = $(this).val();
    var img = images[sliderVal];
    console.log('source ' + img.src);
    a_ctx.drawImage(img,300,300); 
});

【讨论】：