this effect is useful when creating ecommerce website, showing detail view of image.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
width: 300px;
height: 300px;
}
</style>
<script>
function imageZoom(imgID, resultID)
{
var img, lens, result, bx, by;
img = $('#imgID');
result = $('resultID');
lens = $("div");
$(lens).attr("class", "img-zoom-lens");
img.parentElement.insertBefore(lens, img);
bx = result.offsetWidth;
by = result.offsetHeight;
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * bx) + "px " + (img.height * by) + "px";
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
e.preventDefault();
pos = getCursorPos(e);
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
lens.style.left = x + "px";
lens.style.top = y + "px";
result.style.backgroundPosition = "-" + (x * bx) + "px -" + (y * by) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
a = img.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
imageZoom("trialimage", "trialresult");
</script>
</head>
<body>
<h1>Image Zooming effect</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<img id="trialimage" src="img_girl.jpg" width="300" height="240">
<div id="trialresult" class="img-zoom-result"></div>
</div>
</body>
</html>
in above zoom effect details,
1)define two container one is original image, second zoom preview.
2) get offsetWidth and offsetHeight using javascript.
3) set cursor and lens position
4) lens set to absolute position on image so that get exact zoom part from image.
5) main image from first container setting to other container background image.
