Native javaScript realizes Taobao magnifying glass effect

When people often visit websites such as Taobao, Tmall, and JD.com, they often see some picture display effects. For example, if you place the mouse on the right side of the picture, an enlarged preview area will appear, which is the so-called magnifying glass effect. I have nothing to do today, so I plan to review the basics of JavaScript and use the basic knowledge to create a magnifying glass effect similar to Taobao.

First, let's talk about some basic knowledge that this effect needs to use:

CSS relative positioning: position: absolute;

Mouse movement in and out and movement events: onmouseover, onmouseout, onmousemove, remember that these events generally do not appear individually

Get mouse click coordinates: X axis: clientX, Y axis: clientY

The left displacement of the current element relative to the parent element: offsetLeft

The upper displacement of the current element relative to the parent element: offsetTop

The actual height and width of the current element (excluding scroll bars): offsetWidth, offsetHeight

The minimum and maximum value of the current element of the ball: Math.min(), Math.max();

Without further ado, let's go to the code!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Magnifying glass effect</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#demo{
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#float-box{
position: relative;
z-index: 1;
}
#small-box{
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#big-box{
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;


}
#big-box img{
position: absolute;
z-index: 5;
}


</style>
</head>
<body>
<div id="demo">
<div id="float-box">
<div id="small-box"></div>
<img src="../images/macbook-small.jpg">
</div>
<div id="big-box">
<img src="../images/macbook-big.jpg">
</div>
</div>
<script type="text/javascript">
window.onload = function(){

// get the required element
var demo = document.getElementById('demo');
var smallBbox = document.getElementById('small-box');
var floatBox = document.getElementById('float-box');
var bigBox = document.getElementById('big-box');
var bigBoxImg = bigBox.getElementsByTagName('img')[0];


floatBox.onmouseover = function(){
smallBbox.style.display = "block";
bigBox.style.display = "block";
}
floatBox.onmouseout = function(){
smallBbox.style.display = "none";
bigBox.style.display = "none";
}
floatBox.onmousemove = function(e){
var _event = e || event;
console.log(_event.clientY);
var l = _event.clientX - demo.offsetLeft - floatBox.offsetLeft - smallBbox.offsetWidth/2;//Divided by 2 because the mouse point appears in the center of the zoom mask
var t = _event.clientY - demo.offsetTop  - floatBox.offsetTop  - smallBbox.offsetHeight/2;

var demoWidth = demo.offsetWidth;
var demoHeight = demo.offsetHeight;


var smallBboxWidth = smallBbox.offsetWidth;
var smallBboxHeight = smallBbox.offsetHeight;
//The maximum XY distance that the mouse can move
var maxX = demoWidth - smallBboxWidth;
var maxY = demoHeight - smallBboxHeight;


l = Math.min(maxX,Math.max(0,l));
t = Math.min(maxY,Math.max(0,t));
smallBbox.style.left = l +"px";
smallBbox.style.top = t +"px";


var percentX = l / (floatBox.offsetWidth - smallBboxWidth);//Find the ratio of the coordinates of the small image mask to the movable area
var percentY = t / (floatBox.offsetHeight - smallBboxHeight);


bigBoxImg.style.left = -percentX *(bigBoxImg.offsetWidth - bigBox.offsetWidth) +"px";//The moving direction of the large image pair is opposite to that of the small image mask
bigBoxImg.style.top  = -percentY*(bigBoxImg.offsetHeight - bigBox.offsetHeight)+"px";

}
}
</script>
</body>
</html>



Guess you like

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