Native JS realizes the magnifying glass effect of pictures on e-commerce website

The magnifying glass effect is a common effect on e-commerce websites. It means that when the mouse slides over the picture, a partial enlarged picture of the picture will appear. It can be achieved by using JS. The following is the final rendering:

The principle of magnifying glass:

When the mouse moves on the small picture, by capturing the position of the mouse on the small icon, locate the corresponding position of the large icon

The main function:

Move the mouse in, the magnifying glass is displayed Move the
mouse out, the magnifying glass is hidden
Move the mouse, the magnifying glass moves with it, and when a large part is drawn

Three mouse events are involved:

onmouseover: Triggered when the mouse pointer moves to the specified object
onmouseout: Triggered when the mouse pointer moves out of the specified object
onmouseomove: Triggered when the mouse pointer moves

Technical point:

offsetLeft: the left displacement of the
child element relative to the parent element offsetTop: the upper displacement of the child element relative to the parent element
offsetWidth: the width
of the element itself offsetHeight: the height of the element itself
event.clientX: the X-axis coordinate of the mouse, relative to the entire page

event.clientY: the Y-axis coordinate of the mouse, relative to the entire page


Core algorithm:

The core algorithm calculation difficulty is how to make the magnifying glass on the small picture and the large picture move at the same time.

As shown in the figure below: When a small picture is enlarged into a large picture, the magnifying glass and the part of the large picture have equal proportions.

Assumption: The degree of small picture is A, and the degree of large picture is B

When the magnifying glass moves a certain distance X to the right, the big picture should move Y to the left, then X/Y = A/B


Here is the source code:

HTML CSS:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS implements the magnifying glass function</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		#demo {
			display: block;
			width: 400px;
			height: 255px;
			margin: 50px;
			position: relative;
			border: 1px solid #ccc;
		}

		#small-box {
			position: relative;
		}

		#big-box {
			display: none;
			position: absolute;
			top: 0;
			left: 460px;
			width: 400px;
			height: 300px;
			overflow: hidden;
			border: 1px #ccc solid;
            z-index: 1;
		}

        #float-box {
        	display: none;
        	width: 160px;
        	height: 120px;
        	position: absolute;
        	background: #ffffcc;
        	border: 1px solid #ccc;
        	opacity: .5;
        	filter: alpha(opacity=50);
        }       

        #mark {
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background-color: #fff;
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 10;
        }

        #big-box img {
            position: absolute;
            z-index: 5
        }
	</style>
</head>
<body>
	<div id="demo">
		<!-- small image-->
	    <div id="small-box">
	    	<!-- The mask layer solves the IE compatibility problem-->
	        <div id="mark"></div>
	        <!-- magnifying glass-->
	        <div id="float-box"></div>
	        <!-- picture-->
	        <img src="macbook-small.jpg"/>
	    </div>
	    <!-- big picture-->
	    <div id="big-box">
	        <img src="macbook-big.jpg"/>
	    </div>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

JS:

window.onload = function(){
	// get the element
	var objDemo = document.getElementById("demo");
	var objSmallBox = document.getElementById('small-box');
	var objFloatBox = document.getElementById('float-box');
	var objBigBox = document.getElementById('big-box');
	var objMark = document.getElementById("mark");
	var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
	
    
    objSmallBox.onmouseover = function(){
    	objFloatBox.style.display = 'block';
    	objBigBox.style.display = 'block';
    }

    objSmallBox.onmouseout = function(){
    	objFloatBox.style.display = 'none';
    	objBigBox.style.display = 'none';
    }

    objSmallBox.onmousemove = function(ev){
        var _event = ev || window.event; //Compatible with event parameter mode of multiple browsers

        var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
        var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

        if (left < 0) {
            left = 0;
        } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
            left = objMark.offsetWidth - objFloatBox.offsetWidth;
        }

        if (top < 0) {
            top = 0;
        } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
            top = objMark.offsetHeight - objFloatBox.offsetHeight;

        }

        objFloatBox.style.left = left + "px"; //What is the value of oSmall.offsetLeft relative to
        objFloatBox.style.top = top + "px";

        var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
        var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

        objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
        objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
    }
}

IE browser compatibility problem solved:

1. Change the event capture writing
var _event = ev || window.event;


2. Add a transparent mask layer mark between the image img and the magnifying glass float-box, and bind the mouse event to the mask layer,

To avoid the problem of picture flicker caused by frequent mouse movement triggering mouseout and mouseover


Original course address: https://www.imooc.com/learn/32

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325337973&siteId=291194637