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; display:inline-block;" class="porovnani-obrazku"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg" class="porovnani-obrazku-predtim" alt> <div class="porovnani-obrazku-potom" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png)"></div> </div> <div style="width: 200px; display: inline-block;" 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" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg)"></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" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg)"></div> </div> <div style="width: 200px; display:inline-block;" class="porovnani-obrazku"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg" class="porovnani-obrazku-predtim" alt> <div class="porovnani-obrazku-potom" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png)"></div> </div> <div style="width: 200px; display: inline-block;" 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" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg)"></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 { 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
(function () { var porovnani = document.querySelectorAll(".porovnani-obrazku"); var predtim = document.querySelectorAll(".porovnani-obrazku-potom"); var potom = document.querySelectorAll(".porovnani-obrazku-predtim"); for (var i = 0; i < porovnani.length; ++i) { this.addEventListener("mousemove", trackLocation, false); this.addEventListener("touchstart", trackLocation, false); this.addEventListener("touchmove", trackLocation, false); } function trackLocation(e) { for (var i = 0; i < potom.length; ++i) { var rect = potom[i].getBoundingClientRect(); var position = (e.pageX - rect.left) / potom[i].offsetWidth * 100; } if (position <= 100) { for (var i = 0; i < predtim.length; ++i) { predtim[i].style.width = position + "%"; } } } })();
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>