Skalieren und zoomen Sie ein Bild

Question

ich sah diese Frage und fand es hilfreich, aber ich habe versucht, mehr mit dem Code zu tun, um Zoomschaltflächen anzuwenden, und es scheint, dass es nicht richtig funktioniert.Ich bin neu in Javascript und JQuery und habe Probleme zu verstehen, wie das Schlüsselwort „this“ angewendet wird.

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

Ich machte einen jsfiddle um meinen Code zu testen.

Answer 1

this bezieht sich auf das angeklickte Element (eigentlich sollten Sie es wahrscheinlich verwenden). $(this) in jQuery), da die Funktion, die nach dem Klick aufgerufen wird, diesen Bereich erhält.Also in deinem Beispiel, this bezieht sich entweder auf die Plus- oder die Minus-Taste, daher skalieren Sie technisch gesehen ihre Breite/Höhe und Anwenden der resultierenden Breite/Höhe auf das Bild.

Eine häufige Sache, um zu vermeiden, dass was debuggt werden muss this Darstellen besteht darin, es einer Variablen ganz oben in der Funktion zuzuweisen, zum Beispiel:

var self = this;

oder

var $myClickedButton = this;

Achten Sie auch auf das Styling:

• element.width bezieht sich auf das Breitenattribut eines Elements (wie <img width="300" />, ähnlich wie bei jQuery $(element).attr('width')), Aber
• element.style.width bezieht sich auf seine CSS-Breite (wie <img style="width: 300px;" />, oder <img class="myClassWithDenotedWidth" />, ähnlich wie bei jQuery $(element).css('width')).Letzteres hat auch eine Einheit, daher müssen Sie es parsen, um nur den numerischen Wert zu erhalten.

Ich habe es für Ihren Plus-Button korrigiert, Sie können das gleiche Prinzip für den Minus-Button befolgen.Folgendes habe ich getan:

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

Sehen Sie es hier: http://jsfiddle.net/shomz/4A9Gt/4/ (Außerdem wurde ein CSS-Übergang hinzugefügt, um Zooms weniger abgehackt zu machen.)