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
<title>Test zvětšení/zmenšení podle umístění kursoru</title> <h1>Test zvětšení/zmenšení podle umístění kursoru</h1> <ul> <li>levé tlačítko – zvětšit</li> <li>pravé tlačítko – zmenšit</li> </ul> <div class="cover"> <img src="http://jecas.cz/files/otaceni-koleckem/testovaci.png" onmousedown="funkce(event)" oncontextmenu="return false" onmousedown="drag(event)" ondragstart="return false"> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.cover { width: 100px; height: 100px; border: 2px solid #000; margin: 3em auto 0 auto; overflow: hidden; } .cover img { position: relative; }
CSS
Autoformát
CSS reset
Až na konci
var img = document.querySelector("img"); var mouse = {x: 0, y: 0}; var position = {x: 0, y: 0}; var scale = 1; var original = img.offsetWidth; function funkce(e) { e = e || window.event; var bound = img.getBoundingClientRect(); mouse.x = e.clientX - bound.left; mouse.y = e.clientY - bound.top; if (e.which == 1) { zoom(1.2); } else { zoom(1/1.2); } e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); } function zoom(scale) { var newWidth = img.offsetWidth * scale; img.style.width = newWidth + "px"; position.x += (mouse.x * -scale + mouse.x); position.y += (mouse.y * -scale + mouse.y); img.style.left = position.x + "px"; img.style.top = position.y + "px"; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>