Scala e zoom un'immagine

Question

ho visto Questa domanda e l'ho trovataUtile, ma ho provato a fare di più con il codice per applicare i pulsanti di zoom e non riescono a farlo funzionare correttamente.Sono nuovo a JavaScript e JQuery e sto avendo problemi a capire come viene applicata la parola chiave "questa".

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

.

Ho fatto un jsfiddle per demo il mio codice.

Answer 1

this si riferisce all'atto dell'elemento cliccato (in realtà, è probabile che tu possa usare $(this) in jQuery), poiché la funzione chiamata dopo il clic ottiene tale scopo. Quindi, nell'esempio, this si riferisce al tasto Plus o Meno, quindi stai ridimensionando tecnicamente la loro larghezza / altezza e applicando la larghezza / altezza risultante all'immagine.

Una cosa comune da evitare di debug di ciò che il this rappresentare è quello di assegnarlo a una variabile nella parte superiore della funzione, ad esempio:

var self = this;

.

o

var $myClickedButton = this;

.

Inoltre, prestare attenzione allo styling:

.
• element.width si riferisce all'attributo di larghezza di un elemento (come <img width="300" />, simile a $(element).attr('width') di JQuery), ma
• element.style.width si riferisce alla sua larghezza CSS (come <img style="width: 300px;" /> o <img class="myClassWithDenotedWidth" />, simile a $(element).css('width')TagCode di JQuery). Quest'ultimo ha anche un'unità, quindi devi analizzarlo per ottenere solo il valore numerico.

L'ho risolto per il tuo pulsante Plus, puoi seguire lo stesso principio per il meno. Ecco cosa ho fatto:

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

.

Vedi qui: http://jsfiddle.net/shomz/4a9gt/4/ (ha anche aggiunto una transizione CSS per rendere gli zoom meno Chotpy)