Existe uma maneira de crescer / diminuir uma imagem em foco usando jQuery?

votos
9

Existe uma maneira, usando jQuery para crescer e então encolher uma imagem (com a animação de modo que parece liso) em pairando sem afetar o layout muito (eu estou supondo que o preenchimento teria que encolher e, em seguida, crescer também).


Com um pouco de andar, eu finalmente veio com a solução, obrigado a todos que ajudaram.

<html>
<head>
<style type=text/css> 
    .growImage {position:relative;width:80%;left:15px;top:15px}
    .growDiv { left: 100px; top: 100px;width:150px;height:150px;position:relative }
</style>

<script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>

</head>
<body> 
<div class=growDiv> 
      <img class=growImage src=image.jpg alt=my image> 
</div>

<script type=text/javascript>

$(document).ready(function(){

    $('.growImage').mouseover(function(){
      //moving the div left a bit is completely optional
      //but should have the effect of growing the image from the middle.
      $(this).stop().animate({width: 100%,left:0px,top:0px}, 400,'swing');
    }).mouseout(function(){ 
      $(this).stop().animate({width: 80%,left:15px,top:15px}, 200,'swing');
    });;
});
</script>
</body></html>
Publicado 19/05/2009 em 16:26
fonte usuário
Em outras línguas...                            


7 respostas

votos
13

Se você tem sua imagem posicionado absolutamente ao documento em CSS, o resto do layout da página não deve mudar quando você animar sua imagem.

Você deve ser capaz de usar a função do jQuery animado (). O código seria algo parecido com isto:

$("#yourImage").hover(
    function(){$(this).animate({width: 400px, height:400px}, 1000);},        
    function(){$(this).animate({width: 200px, height:200px}, 1000);}
);

Este exemplo iria crescer a imagem com id = yourimage para 400px de largura e de altura quando moused sobre, e trazê-lo de volta para 200px de largura e de altura quando a pairar termina. Dito isto, o problema reside mais em HTML / CSS do que jQuery.

Respondeu 19/05/2009 em 16:49
fonte usuário

votos
9

As crescer e encolher operações são fáceis com .animate:

$("#imgId").click(function(){
  $(this).animate({ 
    width: newWidth,
    height: newHeight
  }, 3000 );
});

O problema é como fazer isso sem alterar o layout da sua página. Uma maneira de fazer isso é com uma cópia que está posicionado absolutamente sobre o conteúdo. Outra poderia ser a posição absolutamente a imagem dentro de uma div tamanho fixo em relação - embora IE pode ter problemas com isso.

Aqui está uma biblioteca existente que parece fazer o que você está pedindo http://justinfarmer.com/?p=14

Respondeu 19/05/2009 em 16:39
fonte usuário

votos
4

Você poderia envolver a imagem em uma div (ou qualquer elemento HTML que você acha que é apropriado, li etc) com ele é estouro definido como oculto. Em seguida, use jQuery .animate a crescer que div, de qualquer maneira que você gosta.

Assim, por exemplo, o html poderia ser

<div class="grower">
  <img src="myimg.jpg" width="300" height="300" alt="my image">
</div>

Em seguida, seu css seria semelhante

.grower {width:250px;height:250px;overflow:hidden;position:relative;}

Portanto, sua imagem é essencialmente cortada pela div, que você pode então crescer em qualquer evento para revelar o tamanho total da imagem usando jQuery

$('.grower').mouseover(function(){
  //moving the div left a bit is completely optional
  //but should have the effect of growing the image from the middle.
  $(this).stop().animate({"width": "300px","left":"-25px"}, 200,'easeInQuint');
}).mouseout(function(){ 
  $(this).stop().animate({"width": "250px","left":"0px"}, 200,'easeInQuint');
});;

NB: Você pode querer adicionar em css adicional em seus js, como um aumento do índice z para o seu div para que ele possa crescer ao longo do layout etc

Respondeu 17/06/2009 em 11:25
fonte usuário

votos
2

Queria postar uma solução simples que eu estou usando com base neste post e informações de resposta de Fox a uma pergunta relacionada.

Usando um <img>como este:<img style="position: absolute;" class="resize" />

Você pode fazer algo semelhante ao que está abaixo. Levará atual largura + altura da imagem, fazendo o 3 vezes maior em foco ( current * 3) e, em seguida, trazê-lo de volta no mouse para fora.

var current_h = null;
var current_w = null;

$('.resize').hover(
    function(){
        current_h = $(this, 'img')[0].height;
        current_w = $(this, 'img')[0].width;
        $(this).animate({width: (current_w * 3), height: (current_h * 3)}, 300);
    },
    function(){
        $(this).animate({width: current_w + 'px', height: current_h + 'px'}, 300);
    }
);

As current_Xvariáveis são globais para que eles estarão acessíveis na ação do mouse-out.

Respondeu 08/07/2011 em 05:24
fonte usuário

votos
1

- HTML

<div class="container">
  <img id="yourImg" src="myimg.jpg">
</div>

- JS

$( ".container" ).toggle({ effect: "scale", persent: 80 });

Informações --mais
http://api.jqueryui.com/scale-effect/

Respondeu 03/08/2013 em 06:05
fonte usuário

votos
1

Se você realmente quer dizer "sem afetar o layout", você precisa se concentrar mais sobre o CSS do que no javascript.

O javascript involoved já feijão postado aqui ... mas para se certificar de que o seu layout não está estragado, você precisará remover a imagem de fluxo do layout.

Isto pode ser feito pelo posicionamento absolutamente, e definindo o respectivo índice z para um valor maior. No entanto, isso nem sempre é a solução mais limpa ... então eu recomendo que você brincar com "position: relative" no pai elemento DOM, e "position: absolute" no estilo da imagem.

A interação da relativa e absoluta é bastante interessante. Você deve google-lo.

aplausos, JRH

Respondeu 20/05/2009 em 06:24
fonte usuário

votos
1

Você não pode usar jQuery animado para implementar isso? Com um pouco de ajustes, deve ser um piscar de olhos.

Respondeu 19/05/2009 em 16:38
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more