Масштабирование и масштабирование изображения

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 относится к элементу, по которому щелкнули (на самом деле вам, вероятно, следует использовать $(this) в jQuery), поскольку функция, вызываемая после щелчка, получает эту область действия.Итак, в вашем примере this относится либо к кнопке плюс, либо к кнопке минус, поэтому вы технически масштабируете их ширина/высота и применение полученной ширины/высоты к изображению.

Обычное дело, чтобы избежать необходимости отлаживать то, что this «представить» — это присвоить его переменной в самом верху функции, например:

var self = this;

или

var $myClickedButton = this;

Также обратите внимание на стиль:

• element.width относится к атрибуту ширины элемента (например, <img width="300" />, аналогично jQuery $(element).attr('width')), но
• element.style.width относится к его ширине CSS (например, <img style="width: 300px;" />, или <img class="myClassWithDenotedWidth" />, аналогично jQuery $(element).css('width')).Последний также имеет единицу измерения, поэтому вам придется проанализировать его, чтобы получить только числовое значение.

Я исправил это для вашей кнопки плюс, вы можете следовать тому же принципу и для минуса.Вот что я сделал:

    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/ (также добавлен переход CSS, чтобы сделать масштабирование менее прерывистым)