Ento, hoje eu vou

correr pela tcnica

usada para ampliar as
miniaturas das imagens
e exibir a sobreposio de texto.
O HTML
H dois DIV que compem a construo de cada elemento, primeiro temos fora. Div item que
o recipiente para a nossa imagem e legenda. Diretamente dentro do item div ns temos a
imagem com o div caption logo abaixo que, com um link e dentro de tag de pargrafo. d uma
olhada na estrutura do cdigo e da imagem abaixo para ver a construo dos elementos div.
1
2
<div class="item">

DICAS, EFEITOS, JQUERY
IMAGEM COM EFEITO DE ZOOM COM
JQUERY
9 DE AGOSTO DE 2012 | WILLIAM LUIS DA SILVA | 0 COMENTRIOS
William Luis
O CSS
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<img src="http://papermashup.com/wp-content/themes/arthemia/portfolio/images/jennifer.jpg

<div class="caption">

<a href="http://jenniferjohnston.tv">Jennifer Johnston</a>

<p>Scottish voiceover Jennifer Johnston. Branding, site design and development</


</div>



</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.item {
width:304px;
height:271px;
border:4px solid #333;
margin:30px 12px 10px 5px;
overflow:hidden;
position:relative;
float:left;
}
.item .caption {
width:304px;
height:71px;
bottom:0;
color:#fff;
background:#000;
font-weight:700;
position:absolute;
left:0;
display:none;
filter:alpha(opacity=82);
-moz-opacity:0.9;
opacity: 0.9;
}
.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:17px;
letter-spacing:-1px;
font-family:Arial, Helvetica, sans-serif;
padding:5px;
display:block;
}
.item .caption p {
padding:5px;
margin:0;
color:#fff;
line-height:15px;
font-size:12px;
O JavaScript
Voc pode ver que ns estamos definindo duas variveis, zoom e move. Observe que em vez
de declarar var novamente na frente move a varivel omiti-lo. Isso porque, se estamos
definindo mltiplas variveis com jQuery voc no precisa adicionar cada vez var, os valores
so quase acorrentado.
Os prximos passos so que configurar um. Funo de foco que, quando acionado ir animar a
largura e altura da imagem para dar a impresso de que a imagem diminuir o zoom, tambm
estamos animando a legenda para fade in e out em foco.
Para ver a demostrao clique aqui, para baixar clique aqui.
Fonte: http://papermashup.com/jquery-image-zoom-effect/
Compartilhe isso:
Facebook Google Twitter LinkedIn Pinterest Imprimir Email Reddit
StumbleUpon Tumblr Pocket
39
40
41
42
43
}
.item img {
border:0;
position:absolute;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function() {

var zoom = 1.1
move = -15;

$('.item').hover(function() {

width = $('.item').width() * zoom;
height = $('.item').height() * zoom;

$(this).find('img').stop(false,true).animate({'width':width,
$(this).find('div.caption').stop(false,true).fadeIn(300);
},
function() {

$(this).find('img').stop(false,true).animate({'width':$('.item'
$(this).find('div.caption').stop(false,true).fadeOut(400);
});

});
Y 1 # P
T ~
Google+
William luis da silva Seguir 42
Curtir isso:
Gosto
Bethefirsttolikethis.

Relacionado
Delete com jQuery Ajax
Em "AJAX"
Simples Galeria feito em jQuery
Em "Dicas"
jQuery PHP Ajax Autocomplete
Existem duas funes no bloco
de cdigo abaixo. o primeiro uma
'sugerir' executa a solicitao
ajax com base na entrada
usurios no campo de texto que
passado para a
Em "AJAX"
CASCADING STYLE SHEETS CONTENT THEMES DATA FORMATS HELVETICA HIDDEN POSITION
HTML JAVASCRIPT JENNIFER JOHNSTON JQUERY LANGUAGE CSS LANGUAGE HTML
PORTFOLIO IMAGES SANS SERIF SOURCE CODE