javascript imagem rollover
-
19-09-2019 - |
Pergunta
Oi eu tenho uma pergunta sobre o rollover de imagem, mas não é como você pensa.
Eu vi um exemplo http://www.asos.com/ e clique no lar botão (nav topo extrema esquerda)
Você pode ver que quando você rolar uma imagem que estadias imagem destacada e os outros escurecer.
Eu sei que isto tem sido feito com jQuery, mas o código é muito confuso. Alguém viu isso antes ou sabe como fazê-lo?
Graças
Solução
solução rápida (que pode ser sintonizado mais curto eu acho):
<div class="images">
<img src="http://www.google.com/google.jpg" />
<img src="http://www.google.com/google.jpg" />
<img src="http://www.google.com/google.jpg" />
<img src="http://www.google.com/google.jpg" />
</div>
<script type="text/javascript">
$().ready(function(){
$('.images img').hover(
function(){
$(this).parents('.images').find('img').not(this).animate({"opacity": "0.3"}, 200);
$(this).animate({"opacity": "1"}, 200);
},
function(){
$(this).animate({"opacity": "1"}, 200);
}
);
$('.images').bind('mouseleave',function(){$(this).find('img').animate({"opacity": "1"}, 200);});
});
Outras dicas
Primeiro de tudo: Firebug é seu amigo. A técnica empregada é mais simples do que se poderia pensar: Eles só reduzir a opacidade das imagens a 0,3. Como o fundo é preto, as imagens aparecem escura. Assim, o código pode ser algo como isto:
$('img.fade').live('mouseover', function (e) {
var $this = $(this).fadeTo(500, 1.0);
$('img.fade').not($this).fadeTo(500, .3);
);
$('img.fade').live('mouseout', function (e) {
var $this = $(this);
$('img.fade').not($this).fadeTo(500, 1.0);
);
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow