5

我有一个用于比较 2 个图像的 jQuery 扩展。我使用以下方法将其称为“控制图像”：

currentCompare = jQuery('#controlImage').imageZoomCompare({
    ...options....
})

扩展的工作方式完全符合我的预期。扩展内部是一个名为 magnifyImage 的函数。我想为查看鼠标上没有滚轮的工具的人添加一个滑块。所以，我有以下 HTML5 滑块代码：

<input type="range" id="imageZoomLevel" name="imageZoomLevel" min="2" max="10" value="2" onchange="javascript:switchZoom(this.value)" />

目标是当用户移动滑块时，“#controlImage”上主动选择的 imageZoomCompare 内的 magnifyImage 函数将相应地增加和减少。我不明白如何通过文档实现这一点，并希望朝着正确的方向轻推。

小提琴：http: //jsfiddle.net/d3xt3r/YeP4Y/

4

1 回答 1

2

我已经实现了滑块的目标：

jsFiddle：http: //jsfiddle.net/YeP4Y/5/

第 230 行：

magnifyexternal: function($tracker, newpower, zoomRange)
{
    var specs=$tracker.data('specs')
    //alert(JSON.stringify(specs));
    var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower
    var magnifier2=specs.magnifier2, od=specs.imagesize, power=specs.curpower
    var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier
    magnifier.$image.css({width:nd[0], height:nd[1]});
    magnifier2.$image.css({width:nd[0], height:nd[1]});
    //alert(JSON.stringify({width:nd[0], height:nd[1]}));
    specs.curpower=newpower //set current power to new power after magnification
    specs.$statusdiv.html('Current Zoom: '+specs.curpower);

    jQuery("input:radio[name=radioZoomLevel][value="+newpower+"]").attr('checked', true);

    this.showstatusdiv(specs, 0, 500);
    $tracker.trigger('mousemove');
},

第 402 行附近：

$("#imageZoomLevel").bind('change', function(){
fiz.magnifyexternal($tracker,$(this).val(), setting.zoomRange)
});

这不完全是您想要的（因为它没有在外部绑定，仅在内部绑定）但它可以工作。

此外，为了使其在外部工作，我会执行以下操作：

  • 找到一种方法来获取插件的实例（例如，通过调用 $('selector').imageZoomCompare('get')
  • 在这个实例上调用 magnifyexternal() 方法
于 2013-04-17T14:24:17.147 回答