JavaScript zoom de l'image et du centre, une zone visible

Je suis en train de créer un zoom capable image lors du clic sur un bouton, cependant l'image doit être agrandie centré sur le point de vue espace, l'image peut être plus grand que le contenant.

J'ai créé un violon ici pour illustrer ce que je veux, je serais évidemment généralement de masquer l'image à l'extérieur du récipient, je ne suis pas dérangé sur la partie tout à l'heure, aussi les mettre dans une bordure de superposition de montrer les limites du conteneur.

J'ai fait le zoom de la partie basé sur le rapport de l'image, j'ai juste besoin de travailler sur la nouvelle-dessus et à gauche css valeurs et de l'appliquer à l'image après le zoom. Aussi, l'image est déplaçable, donc une fois que vous déplacez l'image qu'elle doit prendre en compte la position de l'image.

Fondamentalement, la centrol point de l'image à l'intérieur de la boîte rouge doit rester la même après le zoom, de sorte que vous êtes effectly zoom sur tout ce qui est au milieu du conteneur.

http://jsfiddle.net/wFaFg/1/

why do you we need code to link to jsfiddle?

Grâce

edit:

http://jsfiddle.net/FU55w/

la proximité avec le dessus de violon, mais toujours pas de zoom complètement sur le point central

OriginalL'auteur Ant | 2013-05-15

  1. 4

    J'ai donc trouvé la solution,

    Il est un peu plus complexe que simplement trouver combien l'image augmenté en taille.

    I x & y la valeur du point central de l'image à l'intérieur du conteneur, en prenant le haut et à gauche de la valeur, en la tournant positif puis ajouter la moitié de la largeur du conteneur et de la hauteur.

    var x = Math.abs(image.position().left) + container.width() / 2
var y = Math.abs(image.position().top) + container.height() / 2

    Je travaille le ratio de l'échelle de l'image en divisant la nouvelle largeur de la vieille largeur, alors je peux multiplier le x & y valeur par le rapport.

    Prendre ensuite la différence entre le nouveau x et y à l'abri du courant à gauche et en haut.

    image.position().left - (newX - x)
image.position().top - (newY - y)

    Complet violon:
    http://jsfiddle.net/phHqQ/

    Comment pouvons-nous faire glisser l'image à l'intérieur des frontières?

    OriginalL'auteur Ant

  2. 1

    Essayer le nouveau violon basé sur votre commentaire:

    http://jsfiddle.net/wFaFg/6/

    $("#zoom").on("click", function(e)
{
    var container = $("#container");
    var image = $("#container img");
    var curLeft = image.position().left;
    var curTop = image.position().top;
    var ratio = image.height() / image.width();

    image.css({
        height: image.height() + (20 * ratio),
        width: image.width() + (20 * ratio),
        left: curLeft - ((20 * ratio)/2),
        top: curTop - ((20 * ratio)/2)
    });
});
    Salut merci pour la réponse, j'ai oublié de dire que l'image est déplaçable, et il faut toujours le zoom à partir du centre de la position actuelle. À l'origine, violon vous pouvez faire glisser l'image si vous faites glisser la partie à partir de l'extérieur du récipient (la frontière div cesse de vous glisser à l'intérieur, pas de problème pour l'instant)
    OK permettez-moi obtenir ce droit. Le violon, l'image commence à en haut à gauche de l'image. Si j'ai maintenant faites-le glisser pour afficher en bas à droite dans le rouge adrea, puis cliquez sur zoom, vous souhaitez agrandir l'image, tandis que la position reste en bas à droite?
    Non, je veux que le point central de l'image à l'intérieur du conteneur pour rester dans la même position, vous êtes effectivement en zoomant sur ce qui est dans le milieu du contenant (boîte rouge)
    Essayer la dernière version du violon.
    Hmmmmm ne semble pas encore pour effectuer un zoom à partir du centre vers moi

    OriginalL'auteur Yeronimo

  3. -4

    http://www.hklabs.org/articles/image_zooming_with_javascript

    Voici l'excellent tutoriel que j'ai fait sur le même sujet!!!
    Utiliser une autre division, avec le fond, comme une partie de votre image. l'autre partie de l'image peut être masquée avec background-repeat:no-repeat; maintenant utiliser la propriété background-position pour déplacer votre image à l'intérieur de la division !

    Ne postez pas de lien seulement des réponses (des liens peuvent être cassés..)
    Alors que ce lien peut répondre à la question, il est préférable d'inclure les parties essentielles de la réponse et de fournir le lien de référence. Lien-ne répond peut devenir non valide si la page liée changements.
    Le lien est cassé et donc la réponse est inutile

    OriginalL'auteur Kaushik