<分区>
我需要在固定大小的 div 中显示图像。 在 div 下必须有一些控件,如光标栏,它设置显示图像的分辨率。 我不太介意写这个东西,但我认为它可能已经存在了。我怎么找不到这样的东西?
(我对 jQZoom 和 zoomimage 之类的东西不感兴趣,它们不允许用户动态选择显示分辨率。)
<分区>
我需要在固定大小的 div 中显示图像。 在 div 下必须有一些控件,如光标栏,它设置显示图像的分辨率。 我不太介意写这个东西,但我认为它可能已经存在了。我怎么找不到这样的东西?
(我对 jQZoom 和 zoomimage 之类的东西不感兴趣,它们不允许用户动态选择显示分辨率。)
最佳答案
由于这个问题现在已经被看到超过 1k 次,所以我将我的解决方案添加到其中。随意复制和改编。
解决方案涉及 jQuery UI slider 插件。主要是我们创建一个固定大小的div,overflow:scroll,里面有一个img标签,我们在下面添加一个slider。 slider “更改”事件绑定(bind)到 img@width/@height 属性的重新缩放。
这是我们所做的摘录:
HTML
<div id="pictureFilePreview">
<img id="pictureFilePreviewImg" src="style/images/spacer.gif"/>
</div>
<div id="pictureSlider"/>
JS
$('#pictureFilePreview').css('overflow','scroll');
$('#pictureFilePreviewImg')
.attr("src", "http://url.of.the.image")
.css("display","block")
.bind("load", function(){ //wait for complete load of the image
// Slider
var initHeight = parseInt($('#pictureFilePreviewImg').attr("height"));
var initWidth = parseInt($('#pictureFilePreviewImg').attr("width"));
if ($('#pictureFilePreview').width() < initWidth
|| $('#pictureFilePreview').height() < initHeight) {
var deltaW = $('#pictureFilePreview').width() - initWidth;
var deltaH = $('#pictureFilePreview').height() - initHeight;
var ratio = 0;
if (deltaW < deltaH) {
ratio = ($('#pictureFilePreview').width() / initWidth) * 100;
} else {
ratio = ($('#pictureFilePreview').height() / initHeight) * 100;
}
$('#pictureSlider').slider({
range: false,
min : ratio,
values: [100],
change: function(event, ui) {
var newHeight = ((initHeight) * ui.value / 100);
var newWidth = ((initWidth) * ui.value / 100);
$('#pictureFilePreviewImg').attr("height",newHeight);
$('#pictureFilePreviewImg').attr("width",newWidth);
$('#pictureFilePreview').css('overflow',ui.value === 0?'visible':'scroll');
}
});
}
});
关于Javascript/jQuery 图像缩放插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/972378/