| Autor | Zpráva | ||
|---|---|---|---|
| moom Profil |
#1 · Zasláno: 20. 6. 2011, 00:39:05
Dobrý den, mám prosím dotaz. Chtěl bych dosáhnout stejného
efektu jako je na těchto stránkách. Při najetí nad seznam obrázků (webů) se zobrazí skrytý DIV s průhledností: www.awwwards.com/ Máte prosím radu jak postupovat. Hledal jsem na googlu, ale nic jsem nenašel. Prosím prosím :) |
||
| Nadan Profil |
#2 · Zasláno: 20. 6. 2011, 00:48:33
CSS:
.div1 { }
.div2 {
background-image: url ('xxx.jpg');
display: none;
}
.zobraz .div2 {
display: block;
}
.skryj .div2 {
display: none;
}
HTML:
<div class="div1" onmouseover="this.className='zobraz'" onmouseout="this.className='skryj'"><div class="div2"></div></div> |
||
| moom Profil |
#3 · Zasláno: 20. 6. 2011, 11:17:18 · Upravil/a: moom
Paráda, děkuji za ukázku. pro začátek se to hodí :)
Vyměnil jsem jenom u onmouseout "skryj" na "div1" protože pak div chytl třídu skryj místo tu původní. Ukázka řešení zde. Ještě jsem koukal na web awwwrads, že to mají vychytanější, že se vlastně zprůhlední jeden DIV, nebo IMG. Že se nevypiná,, nebo nezapíná DIV A, nebo B. Vycucal jsem tuto ukázku, která využívá knihovnu jQuery plus doplněný následující skript. Ale nerouzumím proč tam jsou ty úvodní řádky Scriptu a nefunguje to jenom samostatně od komentáře //Awards. Pokud smažu začátek, tak to přestane fungovat. Ukázka je zde.
function resizescreen(){}
$(document).ready(function() {
resizescreen();
// Awards
$(".listsites li").hover(function(){
$(this).find("img").fadeTo("fast", 0.2);
$(this).find(".info").fadeIn("fast");
},
function(){
$(this).find("img").fadeTo("fast", 1);
$(this).find(".info").fadeOut("fast");;
});
});
|
||
|
Časová prodleva: 13 let
|
|||
0