1

固定サイズのdivで画像を表示する必要があります。divの下には、表示される画像の解像度を設定するカーソルバーなどのコントロールが必要です。書くことはあまり気になりませんが、すでに存在しているのではないかと思いました。どうしてそんなものが見つからないの？

（jQZoomやzoomimageのように、ユーザーが表示解像度を動的に選択できないようなものには興味がありません。）

4

2 に答える 2

2

この質問は現在1,000回以上見られているので、私はそれに解決策を追加します。自由にコピーして適応させてください。

このソリューションには、jQueryUIスライダープラグインが含まれます。主に、固定サイズのdiv、overflow：scrollを作成し、imgタグを含め、その下にスライダーを追加します。スライダーの「変更」イベントは、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');  
                }  
            }); 
        }
    });
于 2009-11-10T12:45:32.080 に答える
1

努力する価値があるかどうかはわかりませんが、カプチーノでまさにこれを行う素晴らしいライブラリがいくつかあります. チュートリアルのウォークスルーでは、画像をズームおよび回転するアプリを構築する方法を示します。

スクラップブックのチュートリアル

于 2009-06-10T00:56:17.777 に答える