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 lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="slider"></div> <div class="images"> <img src="http://img.djpw.cz/ghh.png"> <img src="http://img.djpw.cz/jhh.png"> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.images { margin: 1em 0; position: relative; } .images img { height: 200px; } .images img:nth-child(2) { position: absolute; left: 0; top: 0; }
CSS
Autoformát
CSS reset
Až na konci
$(function() { function refreshOpacity() { $( ".images img:nth-child(2)" ).css( "opacity", $( "#slider" ).slider( "value" )/100 ); } $( "#slider" ).slider({ orientation: "horizontal", range: "min", max: 100, slide: refreshOpacity, change: refreshOpacity }); $( "#slider" ).slider( "value", 50 ); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>