jQuery Mobile的滑块图像序列

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

目前我有这么远与下面的代码，但通过图像上滑动时，无法顺利从另一个并且有一个滞后。您必须在特定的索引处移动它以显示图像，然后将其显示到下一个，因为在您滑过这些值时它不会显示它。

我的另一种选择是将所有图像的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); 
    } 
});

来源

2013-03-15 mario91tr

尝试链接这个http://tympanus.net/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/ – Omar 2013-03-15 22:23:13

@Omar感谢。我使用PhotoSwipe作为原型，效果很好，但我希望能够在图像上缩放/添加滤镜效果，并使用滑块而不是按钮。画布看起来是最佳选择。 – mario91tr 2013-03-15 22:59:26

这是一个不同于photoswipe，可以很容易地修改。 – Omar 2013-03-15 23:28:12

我设法通过使用更改事件而不是使用滑块启动/停止事件来弄清楚它。当我滑过这些图像时，它们从一个平滑地画到另一个。

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

来源

2013-03-16 12:00:15 mario91tr

jQuery Mobile的滑块图像序列

回答

相关问题