html de zoom au survol de la souris

Je veux avoir une photo dans un site, et quand je souris plus, je veux un peu de magnifier l'effet de zoom.

Puis-je le faire en html, avec de la toile ou quelque chose? javascript peut-être?

merci

OriginalL'auteur pvinis | 2011-02-09

  1. 2

    Toile n'est pas pris en charge par IE sans plug-ins tiers. Vous aurez envie de le faire en JavaScript. jQuery très facile et propre. Lier des gestionnaires pour les placez dans /événements pour l'image de l'élément que vous souhaitez zoomer à l'aide d' .hover(). "La liaison des gestionnaires" signifie tout simplement vous passer deux fonctions .hover() qui sera exécutée lorsque l'utilisateur place le pointeur de dans et à l'extérieur, respectivement. Ces fonctions utilisent animate(), vous pouvez tout simplement passer à une nouvelle taille.

    Ont un coup d'oeil à la documentation de .animate() et .hover(). Si vous êtes totalement nouveau pour jQuery, découvrez les tutoriels.

    OriginalL'auteur Ori

  2. 3

    Joindre votre photo dans un div et ajouter Zoom via CSS sur le vol stationnaire. Vous souhaiterez peut-être augmenter le z-index sur le vol stationnaire. Vous pouvez ajouter à la ci-dessous CSS pour faire de la photo agrandie look/style mieux. Si vous ne voulez pas de réinventer la roue, regarder dehors pour certains plugin Jquery qui peut faire la même chose dans une élégante manière avec moins d'effort.

    CSS:

    #div-1 {
            position: absolute;
        }
#div-1.hover {
            position: absolute; zoom: 70%; border: solid 1px; z-index:10;
        }

    Jquery/Javascript:

              <script type = "text/javascript"> 
$(document).ready(function() {
$(".div-1").onmouseover(function() {
    toggle_visibility('div-1');
})

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if ($(e).hasClass("hover")) {
        $(e).removeClass("hover");
    } else {
        $($(e)).addClass("hover");
        $($(e)).attr({
            width: "100%",
            height: "100%"
        });
    }
}}); < /script>

    OriginalL'auteur Piyush Mattoo

  3. 2

    Vous pouvez afficher l'image dans une div comme une image de fond d'écran et changer la position avec un peu de javascript.

    Voici une bibliothèque avec quelques exemples: http://www.mind-projects.it/projects/jqzoom/demos.php

    nice! merci! .
    comment peut-on aller sur la zone de zoom circulaire à l'aide de jQZoom?
    J'ai écrit une réponse ici: stackoverflow.com/questions/5856381/...
    il aurait été moins compliqué si vous aviez la mettre ici! Mais merci 🙂
    ah... mon mauvais. J'ai supposé que c'était aussi à propos de jQZoom

    OriginalL'auteur Wolph

  4. 2

    Je crois que j'ai trouvé ce que vous voulez: loupe.js. De ce que j'ai vu, il est l'un des meilleurs à la recherche de la loupe/loupe effets.

    OriginalL'auteur Dave O.

  5. 0

    J'ai trouvé quelques relative exemple, alors visitez ces:

    1. exemple en ajax-zoom site web.
    2. un autre exemple: l'Effet de Zoom (Caraïbes),le Cadre de l'Effet (Mona Lisa),X-Ray Effet (Homère),Impression Effet (G5) .
    3. GOOOOOOOOOGLE 🙂
    Alors que les liens que vous avez fournies peuvent répondre à la question, il est préférable de placer les pièces essentielles de votre solution directement dans la réponse dans le cas où les liens expirent dans l'avenir.

    OriginalL'auteur Hamid