Hello guys, in this tutorial we will create Zoom Image Point With Mouse Wheel using JavaScript
Zoom Image Point With Mouse Wheel Common Query
- image zoom in zoom out animation CSS
- image zoom out animation CSS
- CSS image zoom effect animation
- css3 image zoom animation
- Zoom Image Point With Mouse Wheel
Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to add Zoom Image Point With Mouse Wheel using JavaScript
First, we need to create three files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>On point zoom with Scrollwheel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="zoom_outer">
<div id="zoom">
<img src="map.jpg" alt="zoom">
</div>
</div>
<script>
var scale = 1,
panning = false,
pointX = 0,
pointY = 0,
start = { x: 0, y: 0 },
zoom = document.getElementById("zoom");
function setTransform() {
zoom.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
}
zoom.onmousedown = function (e) {
e.preventDefault();
start = { x: e.clientX - pointX, y: e.clientY - pointY };
panning = true;
}
zoom.onmouseup = function (e) {
panning = false;
}
zoom.onmousemove = function (e) {
e.preventDefault();
if (!panning) {
return;
}
pointX = (e.clientX - start.x);
pointY = (e.clientY - start.y);
setTransform();
}
zoom.onwheel = function (e) {
e.preventDefault();
var xs = (e.clientX - pointX) / scale,
ys = (e.clientY - pointY) / scale,
delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
(delta > 0) ? (scale *= 1.2) : (scale /= 1.2);
pointX = e.clientX - xs * scale;
pointY = e.clientY - ys * scale;
setTransform();
}
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
outline: 0;
overflow: hidden;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#zoom {
width: 100%;
height: 100%;
transform-origin: 0px 0px;
transform: scale(1) translate(0px, 0px);
cursor: grab;
}
div#zoom > img {
width: 100%;
height: auto;
}
Zoom Image Point With Mouse Wheel Video Output:
Zoom Image Point With Mouse Wheel Codepen Output:
Top comments (4)
Whats the license of this example source code? Can I use it like I want in my project or do some restrictions apply?
its open source you can use it feel free without any restriction.
this is Awsome But is should have Max Zoom and Min Zoom, that it cannot zoom-in and zoom-out at a certain point
Good, very good! Thank
i used it, many thanks!
demo: phuquoczone.com/giapha1/timkiem.php