画像を固定サイズのdivで表示する必要があります。 divの下には、表示されている画像の解像度を設定するカーソルバーのようなコントロールが必要です。 私は物事を書いても大したことはありませんが、すでに存在するかもしれないと思いました。どのように私はそのようなものを見つけることができませんか？Javascript/jQuery画像ズームプラグイン
（私は、ユーザーが動的ディスプレイ解像度を選択することはできませんjQZoomもzoomimageのようなものに興味を持っていないです。）それはあなたのための努力の価値がある場合
通り。自由にコピーして調整してください。
このソリューションには、jQuery UIスライダープラグインが含まれています。主に固定サイズのdivを作成します。オーバーフロー：imgタグを含むscroll、その下にスライダーを追加します。スライダの 'change'イベントは、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');
}
});
}
});
は知らないが、そのいくつかの素晴らしいライブラリがありますまさにこれをカプチーノでやってください。チュートリアルチュートリアルでは、あなたがどのように画像をズームすると回転のアプリを構築することを示しています。この質問は、今、私はそれに私の解決策を追加し、より多く1K度も見てきた