[es] - Javascript thumbnail mouseover ili kako već

sajtfokus

Član broj: 288948
Poruke: 9
*.dynamic.sbb.rs.

Sajt: fokus.iz.rs

Profil

Javascript thumbnail mouseover ili kako već

^{09.10.2011. u 22:12 - pre 152 meseci}

Kako se postiže ovaj efekat na http://www.linkeri.com?

Sa desne strane na ovom sajtu (sekcija: Razno - Najbolje), kad se postavi miš na thumbnail, on se uveća uz neki efekat.

Zna neko?

Fokus | Online vesti

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Javascript thumbnail mouseover ili kako već

^{10.10.2011. u 18:13 - pre 152 meseci}

ako pogledas DOM stablo te strane mozes da vidis da taj efekat funkcionise tako sto element koji sluzi kao kontejner oko link sa manjom slikom sadzi jos jedan element koji u sebi sadrzi vecu sliku i taj element je inicijalno sakriven. kada se kontejen hoveruje element koji u sebi sadrzi vecu sliku se prikaze pomocu .animate() metode.

dakle, struktura bi u osnovi bila ovakva:

Code (html):

<div class="container">

   <a href=".."><img src="small.png" /></a>

   <div class="large">

      <a href=".."><img src="large.png" /></a>

   </div>

</div>

sto se potrebnog css-a tice, .container mora da ima position: relative dok .large mora da ima position: absolute; display: none;, ukoliko su ti .container i .large fiksne velicine onda mozes u css-u definisati left i top za .large, u suprotnom moraces da izracunas te vrednosti pomocu javascripta.

sam javascript je veoma prost, ako uzmemo jquery:

Code (javascript):

jQuery(function($) {

   $('.container').hover(

      function() { $(this).find('>.large').stop().animate({opacity: 1}); },

      function() { $(this).find('>.large').stop().animate({opacity: 0}); }

   );

});

ovo je samo jedan od nacina kako da se postigne taj efekat, mislim da je dovoljno jednostavan za pocetnike.

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu