画像を拡大縮小します

Question

私はこの質問とそれを見つけました役に立ちましたが、ズームボタンを適用するためのコードでもっとやってみましたが、正しく動作するように見えないようです。私はJavaScriptとjQueryに慣れていて、 "this"キーワードがどのように適用されるかを理解するのに問題があります。

$('#plus').click(
function( event ){
    var scale = 150/100;
    var pos = $('#Container img').offset();
    var clickX = event.pageX - pos.left;
    var clickY = event.pageY - pos.top;
    var container = $('#Container img').parent().get(0);

    $('#Container img').css({
        width: this.width*scale, 
        height: this.height*scale
    });

    container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
    container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);

$('#minus').click(
function( event ){
    var scale = 100/150;
    var pos = $('#Container img').offset();
    var clickX = event.pageX - pos.left;
    var clickY = event.pageY - pos.top;
    var container = $('#Container img').parent().get(0);

    $('#Container img').css({
        width: this.width*scale, 
        height: this.height*scale
    });

    container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
    container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);

.

私は jsfiddle をマイコードをデモする。

Answer 1

thisクリックされた要素（実際には、jQueryでは一般的に$(this)を使用する必要があります）を参照します。クリック後に呼び出し後の関数はそのスコープを取得します。そのため、thisはプラスまたはマイナスボタンのどちらかを指します。したがって、 width> width /高さを技術的にスケーリングし、結果として生じる幅/高さを画像に適用します。

一般的なものをデバッグしなければならないのは、関数の最上位で変数に割り当てることです。

var self = this;

.

または

var $myClickedButton = this;

.

また、スタイリングに注意してください：

• thisは、要素の幅属性（jQueryのelement.widthと同様に、<img width="300" />など）を参照しますが、
• $(element).attr('width')は、そのCSS幅（JQueryのelement.style.widthと同様に、<img style="width: 300px;" />、または<img class="myClassWithDenotedWidth" />など）を指します。後者にはユニットもありますので、数値だけを取得するためにパーセントする必要があります。

あなたのプラスボタンのためにそれを修正しました、あなたはマイナスのために同じ原則に従うことができます。これが私がしたことです：

    var $image = $('#Container img');
    var container = $image.parent().get(0);

    $('#Container img').css({
        width: Math.round(parseInt($image.css('width'), 10) * scale), 
        height: Math.round(parseInt($image.css('height'), 10) * scale)
    });

.

ここでそれを見てください： http://jsfiddle.net/shomz/4a9gt/4/h/a >（ズームを縮小するようにするためのCSS移行も追加）