@turbomen24

Почему при использовании input range + transform scale дёргается изображение?

Написал скрипт, который при нажатии на лупу с плюсом, увеличивает изображение. При нажатии на лупу с минусом, уменьшает изображение. Происходит это так:

$(function() {
	 $('#zoom-plus').click(function () {
	 var $mywidth = $('.images').width();
	 var $ratio = 1.1;	
	 var $newwidth = ($mywidth * $ratio) + 'px';
		$('.images').css("width", $newwidth)
    });
	$('#zoom-minus').click(function () {
	 var $mywidth = $('.images').width();
	 var $ratio = 0.9;	
	 var $newwidth = ($mywidth * $ratio) + 'px';
		$('.images').css("width", $newwidth)
    });	
});


Это работает, но если изображение становится больше окна браузера или самого родительского элемента, оно, естественно, позиционируется слева, и его часть уходит за правый край. Необходимо, чтобы изображение всегда центрировалось посередине.

------------

UPD Задачу решил, высчитывая нынешнюю ширину блока и прибавляя отрицательный марджин, который равен половине от разницы в ширине нового размера изображения и родительского элемента.

Вот что получилось:

$(function() {
		$('#zoom-plus').click(function () {
		var $mywidth = $('.images').width();
		var $ratio = 40;
		var $newwidth = ($mywidth + $ratio) + 'px';
		var $parent = $('.lite-box').width();
		var $margin = '-' + (($mywidth + $ratio - $parent) / 2) + 'px';
		if ($mywidth < $parent) { 
		$('.images').css("width", $newwidth)
		}
		else if ($mywidth == $parent) {
		$('.images').css("width", $newwidth);
		$('.images').css("margin-left", $margin)
		}
		else if ($mywidth > $parent) {	
		$('.images').css("width", $newwidth);	 
		$('.images').css("margin-left", $margin)
		} else { alert('33') };
    });		
	$('#zoom-minus').click(function () {		
		var $mywidth = $('.images').width();
		var $ratio = 40;
		var $newwidth = ($mywidth - $ratio) + 'px';
		var $parent = $('.lite-box').width();
		var $margin = '-' + (($mywidth - $ratio - $parent) / 2) + 'px';
		if ($mywidth > $parent) { 
		$('.images').css("width", $newwidth);
		$('.images').css("margin-left", $margin)
		}
		else if ($mywidth <= $parent) {
		$('.images').css("width", $newwidth);
		$('.images').css("margin", "0 auto")
		}
		else {}
    });	
});


---

UPD II

Удобнее получается использовать transform: scale, но есть проблема: при добавлении transition, изображение начинает дёргаться, если медленно перемещать ползунок. Посмотрите сами:

https://codepen.io/turbomen24/pen/XWKJvNM

Почему так происходит?
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Sashqa
Используйте trasnform: scale()
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы