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í kolečekm podle umístění kursoru</title> <body onmousewheel="funkce(event)"> <h1>Test zvětšení/zmenšení kolečekm podle umístění kursoru</h1> <p>Zvětšování a zmenšování probíhá na základě směru otáčení kolečka myši.</p> <div class="cover"> <img src="http://jecas.cz/files/otaceni-koleckem/testovaci.png"> </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 sjednocenySmer = e.wheelDelta || -e.detail; var smer = Math.max(-1, Math.min(1, sjednocenySmer)); var bound = img.getBoundingClientRect(); mouse.x = e.clientX - bound.left; mouse.y = e.clientY - bound.top; if (smer == 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"; } if (document.addEventListener) { document.body.addEventListener("DOMMouseScroll", funkce, false); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>