web-dev-qa-db-fra.com

Comment agrandir le contenu div en utilisant jquery?

J'ai un parent <div>. À l'intérieur, je place du texte et des images. Maintenant, je dois zoomer sur une partie particulière de ce parent <div>. C'est possible?

javascriptjqueryhtml
26
KarSho

Si vous souhaitez que cette image soit zoomée au survol de la souris:

$(document).ready( function() {
$('#div img').hover(
    function() {
        $(this).animate({ 'zoom': 1.2 }, 400);
    },
    function() {
        $(this).animate({ 'zoom': 1 }, 400);
    });
});

Ou vous pouvez faire comme ceci si les boutons de zoom avant et arrière sont utilisés:

$("#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 - votre réponse a été très utile. Je vous remercie! J'avais besoin d'un zoom de type "Cartes" pour une div et étais capable de produire l'impression dont j'avais besoin avec votre message. Mes critères comprenaient la nécessité de répéter le clic et de continuer à effectuer un zoom arrière/avant à chaque clic. Voici le résultat final. 

    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

Utilisé zoom-master/jquery.zoom.js. Le zoom pour l'image a parfaitement fonctionné. Voici un lien vers la page . http://www.jacklmoore.com/zoom/

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

    });
</script>
0
N Czar