Масштабирование и масштабирование изображения
-
20-12-2019 - |
Вопрос
Я видел этот вопрос и нашел это полезным, но я попытался сделать больше с кодом, чтобы применить кнопки масштабирования, и, похоже, не смог заставить его работать должным образом.Я новичок в 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 чтобы продемонстрировать мой код.
Решение
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, чтобы сделать масштабирование менее прерывистым)