Javascript / jQuery 图像缩放插件 [关闭]答案

【问题标题】：Javascript / jQuery image zoom plugin [closed]Javascript / jQuery 图像缩放插件 [关闭]
【发布时间】：2010-11-01 14:58:56
【问题描述】：

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

（我对 jQZoom 和 zoomimage 等不允许用户动态选择显示分辨率的东西不感兴趣。）

【问题讨论】：

标签： javascript jquery image zooming

【解决方案1】：

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

解决方案涉及 jQuery UI 滑块插件。主要是我们创建一个固定大小的div，overflow:scroll，包含一个img标签，我们在它下面添加一个slider。滑块“更改”事件绑定到重新调整 img@width/@height 属性。

这是我们所做的摘录：

HTML

    <div id="pictureFilePreview">
        <img id="pictureFilePreviewImg" src="style/images/spacer.gif"/>
    </div>
    <div id="pictureSlider"/>

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

【讨论】：

【解决方案2】：

不知道这是否值得您付出努力，但在 Cappuccino 中有一些很棒的库可以做到这一点。本教程演练向您展示了如何构建缩放和旋转图像的应用程序：

Scrapbook tutorial

【讨论】：