it-roy-ru.com

Как увеличить содержимое DIV с помощью JQuery?

У меня есть родительский <div>. Внутри этого я размещаю текст и изображения. Теперь мне нужно увеличить конкретную часть этого родительского <div>. Является ли это возможным?

26
KarSho

Если вы хотите, чтобы это изображение было увеличено при наведении мыши:

$(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
    );
}
33
Gadde

@Gadde - ваш ответ был очень полезным. Спасибо! Мне нужно было увеличить изображение, похожее на «Карты», и я смог создать ощущение, необходимое мне в вашем посте. Мои критерии включали необходимость повторения щелчка и продолжения уменьшения/увеличения при каждом щелчке. Ниже мой окончательный результат. 

    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');
            })
    });
11
ter24
 $('image').animate({ 'zoom': 1}, 400);
5
user1912656

Используется zoom-master/jquery.zoom.js. Зум для изображения работал отлично. Вот ссылка на страницу . http://www.jacklmoore.com/zoom/

 <script>
    $(document).ready(function(){
        $('#ex1').zoom();

    });
</script>
0
N Czar