Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!doctype html> <html> <head> <meta charset="utf-8" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> </head> <body> <div class="image"> <a href="#" class="flip"> <img src="http://malsup.github.com/images/beach2.jpg" /> <img src="http://malsup.github.com/images/beach3.jpg" /> </a> <p> Popis popis popis popis </p> </div> <div class="image"> <a href="#" class="flip"> <img src="http://malsup.github.com/images/beach2.jpg" /> <img src="http://malsup.github.com/images/beach3.jpg" /> </a> <p> Popis popis popis popis </p> </div> <div class="image"> <a href="#" class="flip"> <img src="http://malsup.github.com/images/beach2.jpg" /> <img src="http://malsup.github.com/images/beach3.jpg" /> </a> <p> Popis popis popis popis </p> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { font-family: sans-serif; } .flip { width: 200px; height: 200px; display: block; position: relative; overflow: hidden; } .flip img { display: none; position: absolute; top: 0; left: 0; margin-left: 0; border: none; height: 100%; opacity: 0; } .flip .front, .flip .back { display: block; } .flip .front { width: 100%; opacity: 1; } .flip .back { margin-left: 50%; width: 0; } .image { float: left; margin: 0 15px 15px 0; padding: 15px; border: 1px solid #ccc; border-radius: 4px; width: 200px; box-shadow: 1px 1px 6px #aaa; } .image .flip { height: 200px; background: #f1f1f1; box-shadow: 0px 0px 1px #888 inset, 1px 1px 6px #bbb inset; } .image p { margin: 15px 0 0; color: #444; font-size: 14px; line-height: 18px; }
CSS
Autoformát
CSS reset
Až na konci
// Čekání na dokument $(function() { // Efekt otočení obrázku // // element Element se třídou .flip // over Informace o tom, jestli je kurzor nad obrázkem // speed Rychlost animace function flip(element, over, speed) { // Parametr speed má defaultní hodnotu 500 speed = speed === undefined ? 250 : speed; // Rychlost se dělí mezi oba kroky animace, pro lepší pocit se rychlost zaokrouhluje. speed = Math.ceil(speed / 2); // jQuery API pro element se třídou .flip var $flip = $(element); // První obrázek var $front = $('.front', element); // Druhý obrázek var $back = $('.back', element); // Informace o tom, jestli je kurzor nad obrázkem se uloží jako data elmentu(.flip) // pro pozdější použití při rozhodování, jestli obrázek obrátit zpět $flip.data('over', over); // Pokud je obrázek ve výchozí pozici a došlo k vyjetí kurzorem z oblasti obrázku if ($back.is('.last') && !$flip.data('over')) // tak se nic animovat nebude return; // jinak se prohodí třídy .front a .back a naanimuje se rozdíl ve stylech $front.switchClass('front', 'back', speed, function() { $back.switchClass('back', 'front', speed, function() { // Pokud je obrázek otočený a kurzor není v oblasti obrázku if ($back.is('.last') && !$flip.data('over')) // tak se obrázek otočí do výchozí pozice vyvoláním události vyjetí kurzoru $flip.trigger('mouseleave'); }); }); } // Ve všech elementech se třídou .flip $('.flip').each(function() { $(this) .children() // se první obrázek označí třídou .front .first() .addClass('front') // a druhý třídou .back a .last(pro určování aktuální pozice) .next() .addClass('back last'); }); // Handlery pro zpracování událostí se navěsí na kořenový element - říká se tomu // delegování a má to tu výhodu, že události nastavíš jedinému prvku, na kterém // odchytáváš události z vnořených elementů. Hodí se to všude, kde se počítá s tím, že // velké množství prvků bude využívat ty samé události, což je právě případ obrázků. // Výborné pro optimalizaci odezvy při práci se stránkou. $(document).on({ // Při najetí kurzorem na obrázek se obrázek otočí mouseenter: function(event) { flip(this, true, 250); }, // a při vyjetí se otočí zpátky mouseleave: function(event) { flip(this, false, 500); } // Tady můžeme určit, pro které prvky chceme události delegovat }, '.flip'); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>