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>