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
<div style="width: 200px;" class="porovnani-obrazku"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" class="porovnani-obrazku-predtim" alt> <div class="porovnani-obrazku-potom"></div> </div> <div style="width: 200px;" class="porovnani-obrazku"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" class="porovnani-obrazku-predtim" alt> <div class="porovnani-obrazku-potom"></div> </div> <div style="width: 200px;" class="porovnani-obrazku"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" class="porovnani-obrazku-predtim" alt> <div class="porovnani-obrazku-potom"></div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
div.porovnani-obrazku { position: relative; font-size: 0; -ms-touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; } div.porovnani-obrazku img { width: 100%; height: auto; } div.porovnani-obrazku-potom { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg); position: absolute; top: 0; left: 0; height: 100%; width: 50%; background-size: cover; } div.porovnani-obrazku:hover { cursor: col-resize; }
CSS
Autoformát
CSS reset
Až na konci
"use strict"; var porovnani = document.querySelectorAll(".porovnani-obrazku"); var predtim = document.getElementsByClassName("porovnani-obrazku-potom")[0]; var potom = document.getElementsByClassName("porovnani-obrazku-predtim")[0]; for (var i = 0; i < porovnani.length; ++i) { porovnani[i].addEventListener("mousemove", trackLocation, false); porovnani[i].addEventListener("touchstart", trackLocation, false); porovnani[i].addEventListener("touchmove", trackLocation, false); } function trackLocation(e) { var rect = potom.getBoundingClientRect(); var position = (e.pageX - rect.left) / potom.offsetWidth * 100; if (position <= 100) { predtim.style.width = position + "%"; } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>