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> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> </head> <body> <div class="flip"> <img src="http://malsup.github.com/images/beach2.jpg" /> <img src="http://malsup.github.com/images/beach3.jpg" /> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.flip { position: relative; overflow: hidden; width: 200px; height: 200px; } .flip img { position: absolute; top: 0; left: 0; margin-left: 0; height: 100%; opacity: 0; } .flip .front { width: 100%; opacity: 1; } .flip .back { margin-left: 50%; width: 0; }
CSS
Autoformát
CSS reset
Až na konci
$(function() { var mouse = { x: 0, y: 0 }; function over(element) { var $element = $(element); var width = $element.width(); var height = $element.height(); var offset = $element.offset(); var left = offset.left; var top = offset.top; var right = left + width; var bottom = top + height; return mouse.x > left && mouse.x < right && mouse.y > top && mouse.y < bottom; } function flip() { var element = this; var $front = $('.front', element); var $back = $('.back', element); if ($back.is('.last') && over(element)) return; $front.switchClass('front', 'back', 250, function() { $back.switchClass('back', 'front', 250, function() { if ($back.is('.last') && !over(element)) flip.call(element); }); }); } $('.flip').each(function() { $(':first-child', this) .addClass('front') .next() .addClass('back last') .nextAll() .hide(); }); $(document) .on({ mousemove: function(event) { mouse.x = event.pageX; mouse.y = event.pageY; }, mouseleave: function() { mouse.x = -1; mouse.y = -1; } }) .on({ mouseenter: flip, mouseleave: flip }, '.flip') });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>