Как увеличить изображение и центрировать его?
Любая Идея, как увеличить изображение на конкретном использовании точки javascript, css ? Я использую webkit основанный браузер.
Я могу масштабировать путем определения свойства масштабирования, как 'elem.style.zoom = "150%", основная проблема, я не могу центрировать изображение, где я хочу масштабировать. Я могу понять, где я хочу масштабировать щелчок мышью использования.
2 ответа
Как я уже говорил в своем комментарии выше, я бы избегал свойства zoom css и придерживался только javascript. Мне удалось собрать воедино следующий код, который хорошо работает при первом клике, на самом деле все, что ему нужно, это немного более динамично (даже слово?).
Он работает в Google Chrome и IE, не уверен насчет других. Как я уже говорил, надеюсь, он укажет вам правильное направление.
Что делать.
- Получите местоположение щелчка внутри изображения. Это может показаться простым, но это не потому, что pageX и pageY события содержат координаты относительно документа. Чтобы вычислить, где внутри изображения кто-то щелкнул, вам необходимо знать положение изображения в документе. Но для этого вам нужно учесть все его родительские элементы, а также их относительное / абсолютное / статическое позиционирование .. это становится беспорядочным ..
- вычислить новый центр (масштабируемая позиция щелчка - верх / левое положение контейнера)
- масштабируйте изображение и прокрутите контейнер до нового центра
, если вы не против использовать для него jQuery, тогда используйте следующий (проверенный)
<script type="text/javascript">
$(document).ready(
function(){
$('#Container img').click(
function( event ){
var scale = 150/100;
var pos = $(this).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(this).parent().get(0);
$(this).css({
width: this.width*scale,
height: this.height*scale
});
container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);
}
);
</script>
и необходимый HTML
<div id="Container">
<img alt="Click to zoom" src="http://sstatic.net/so/img/logo.png" />
</div>