Le redimensionnement d'Image avec Jquery Animate

Est-il possible d'avoir une image anime à partir du centre vers l'extérieur plutôt que de gauche à droite et de haut en bas)? L'effet, je suis en train de réaliser est similaire à la visionneuse, lorsque vous cliquez sur une image et elle s'étend vers l'extérieur.

Merci!

  • Je n'ai pas testé, donc cela restera un commentaire, mais ne pouvait pas changer d'animer la largeur/hauteur de et puis le haut/gauche, haut/gauche de la moitié de la modification de la largeur/hauteur.
InformationsquelleAutor Peter Pocket | 2011-05-03
  1. 2

    @Aron la solution est ok, mais il est livré avec certaines restrictions: vous ne pouvez pas avoir une image dans le flux de documents.

    Ma solution crée en fait une position absolue clone de l'image et montre il sur le dessus de l'image d'origine. Il calcule l'image d'origine absolue de la position à l'aide de .offset().

    L'inconvénient de cette méthode est que si le flux de documents des changements (comme lors du redimensionnement de la fenêtre du client), la position absolue de l'élément de séjours à l'ancienne position. Il dépend de la mise en page de votre page si vous pouvez utiliser cette méthode ou pas.

    Cliquez sur l'image dans mon démo pour basculer l'effet. http://jsfiddle.net/Xhchp/3/

    HTML:

    <p>Some random text.</p>
<p>More blah. <img id="someImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Deletion_icon.svg/600px-Deletion_icon.svg.png"/> More blah.</p>
<p>Some random text.</p>

    CSS:

    #someImage { width:32px; height:32px; }

    javascript:

    function ZoomIn(){
var p = $(this).offset();
var w = $(this).width();
var h = $(this).height();
var $clone = $(this).clone();
$clone.css({
position: "absolute",
left: p.left + "px",
top: p.top + "px",
"z-index": 2
}).appendTo('body');
$clone.data("origWidth",w);
$clone.data("origHeight",h);
$clone.data("origTop",p.top);
$clone.data("origLeft",p.left);
$clone.animate({
top: "-=" + Math.floor(h * 0.5),
left: "-=" + Math.floor(w * 0.5),
width: Math.floor(w * 2),
height: Math.floor(h * 2)
},function(){
});
$clone.click(ZoomOut);
}
function ZoomOut(){
var w = $(this).data("origWidth");
var h = $(this).data("origHeight");
var t = $(this).data("origTop");
var l = $(this).data("origLeft");
$(this).animate({
top: t,
left: l,
width: w,
height: h
},function(){
$(this).remove();
});
}
$(function(){
$('img').click(ZoomIn);
});
    InformationsquelleAutor DarthJDG
  2. 10

    Cela ne devrait pas être trop dur:

    //increase factor
var factor = 2;
$('#foo').click(function() {
$(this).animate({
top: '-=' + $(this).height() / factor,
left: '-=' + $(this).width() / factor,
width: $(this).width() * factor
});
});

    Comment cela est réalisé:

    • Image est augmenté dans la taille, avec un certain ratio. Dans ce cas, il est * 2, mais je peux imaginer que vous voulez faire quelque chose d'intelligent, avec une limite supérieure ou donc.
    • Image en haut et à gauche décalage est diminué avec les dimensions actuelles divisé par le facteur d'augmentation.

    Démonstration rapide ici.

    InformationsquelleAutor Aron Rotteveel
  3. 2

    Si j'ai bien compris à droite, voici ce que vous voulez.

    Je montre la grande image avec position: absolute, alors votre mise en page n'est pas affectée par l'image redimensionnée. Si vous avez des questions au sujet de cette solution, poster des commentaires ici.

    • Comment vous y prendriez-vous toggeling cette fonction?
    InformationsquelleAutor Erick Petrucelli