Javascript / jQuery图像缩放插件

我需要以固定大小的div显示图像。 在div下面必须有一些控件，比如光标条，它设置显示图像的分辨率。 我不太介意写这个东西，但我认为它可能已经存在了。 为什么我找不到这样的东西？

（我对像jQZoom和zoomimage这样的东西不感兴趣，它们不会让用户动态选择显示分辨率。）

Answer 1

由于这个问题现在被看到超过1k次，我添加了我的解决方案。 随意复制和适应。

该解决方案涉及jQuery UI滑块插件。 主要是我们创建一个固定大小的div，overflow：scroll，包含一个img标签，我们在它下面添加一个滑块。 滑块’change’事件绑定到img @ width / @ height属性的重新缩放。

以下是我们所做的摘录：

HTML

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'); } }); } }); 

Answer 2

不知道是否值得为你付出努力，但是有一些很棒的图书馆在卡布奇诺就是这么做的。 本教程演练向您展示如何构建缩放和旋转图像的应用程序：

剪贴簿教程