У меня есть родительский <div>
. Внутри я помещаю текст и изображения. Теперь мне нужно увеличить до определенной части этого родителя <div>
. Возможно ли это?
Как увеличить содержимое div с помощью jquery?
Ответ 1
Если вы хотите, чтобы изображение было увеличено при наведении мыши:
$(document).ready( function() {
$('#div img').hover(
function() {
$(this).animate({ 'zoom': 1.2 }, 400);
},
function() {
$(this).animate({ 'zoom': 1 }, 400);
});
});
или вы можете сделать это, если используются кнопки увеличения и уменьшения:
$("#ZoomIn").click(ZoomIn());
$("#ZoomOut").click(ZoomOut());
function ZoomIn (event) {
$("#div img").width(
$("#div img").width() * 1.2
);
$("#div img").height(
$("#div img").height() * 1.2
);
},
function ZoomOut (event) {
$("#div img").width(
$("#imgDtls").width() * 0.5
);
$("#div img").height(
$("#div img").height() * 0.5
);
}
Ответ 2
@Gadde - ваш ответ был очень полезным. Спасибо! Мне нужен был "Карт", похожий на масштаб для div, и я смог создать ощущение, в котором я нуждался, с вашим сообщением. Мои критерии включали необходимость повторения щелчка и продолжали уменьшать/уменьшать каждый клик. Ниже мой окончательный результат.
var currentZoom = 1.0;
$(document).ready(function () {
$('#btn_ZoomIn').click(
function () {
$('#divName').animate({ 'zoom': currentZoom += .1 }, 'slow');
})
$('#btn_ZoomOut').click(
function () {
$('#divName').animate({ 'zoom': currentZoom -= .1 }, 'slow');
})
$('#btn_ZoomReset').click(
function () {
currentZoom = 1.0
$('#divName').animate({ 'zoom': 1 }, 'slow');
})
});
Ответ 3
$('image').animate({ 'zoom': 1}, 400);
Ответ 4
Используется zoom-master/jquery.zoom.js. Масштабирование изображения работало отлично. Вот ссылка на страницу. http://www.jacklmoore.com/zoom/
<script>
$(document).ready(function(){
$('#ex1').zoom();
});
</script>