First, clear concept

Start by knowing a few apis for page location information

Supplement:

Two, split version

This version is mainly to put a large picture on the right side of the small picture, through the large picture moving position and the use of hierarchy, display part of the large picture, show the effect of enlargement. Calculation formula: Left of large image = -(left image inside slider left/(left image width – slider width)) * (right image width – right image display area width)

The HTML code

The page structure is very simple, generally speaking, it needs two images, a small image and a large image exactly the same, the main complex is the calculation part in JS:

<div id="demo"> <! - the picture on the left - > < div id = "small - box" > < div id = "mark" > < / div > <! - a magnifying glass - > < div id = "float - box" > < / div > < img SRC = "small. JPG" / > < / div > <! - is a sign that a larger version of -- > < div id = "big - box" > < img SRC = "big. JPG" / > < / div > < / div >Copy the code

CSS code

<style>
    * {
        margin: 0;
        padding: 0
    }
    #demo {
        display: block;
        width: 400px;
        height: 255px;
        margin: 50px;
        position: relative;
        border: 1px solid #ccc;
    }
    #small-box {
        position: relative;
        z-index: 1;
    }
    #float-box {
        display: none;
        width: 160px;
        height: 120px;
        position: absolute;
        background: #ffffcc;
        border: 1px solid #ccc;
        filter: alpha(opacity=50);
        opacity: 0.5;
    }
    #mark {
        position: absolute;
        display: block;
        width: 400px;
        height: 255px;
        background-color: #fff;
        filter: alpha(opacity=0);
        opacity: 0;
        z-index: 10;
    }
    #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>
Copy the code

At this point all we have on the page is a small image

JavaScript code

Function () {var objDemo = document.getelementById ("demo"); var objSmallBox = document.getElementById("small-box"); var objMark = document.getElementById("mark"); var objFloatBox = document.getElementById("float-box"); var objBigBox = document.getElementById("big-box"); var objBigBoxImage = objBigBox.getElementsByTagName("img")[0]; / / mouse events as objMark onmouseover = function () {objFloatBox. Style. The display = "block" objBigBox. Style. The display = "block"} . / / when the mouse events objMark onmouseout = function () {objFloatBox. Style. The display = "none" objBigBox. Style. The display = "none"} / / mouse event objMark onmousemove = function (ev) {var _event = ev | | window. The event; 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"; 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"; } } </script>Copy the code

Three, mash-up version

The so-called elegant version is to turn the mouse into a magnifying glass, so that there will be a more real magnifying glass to see things

The general implementation idea is as follows:

1) Add the mouseover listening function to the part of the original image. After moving the mouse pointer over the original image, obtain the top and left positions of the mouse pointer away from the original image

2) In the mouse magnifying glass area, set the area background to the enlarged picture and set it to background

3) Reverse calculate the distance that the picture should move after amplification and set background-position

The HTML code

The HTML part of the code is very simple, just a background image of the original image, and two undisplayed IMG elements, which are used to obtain the width and height of the image

<div id="background" className={styles.originImage} style={{backgroundImage: `url(${url})`}}>
      <img src={url} />
      <img id="bigger" src={url} />
      <div id="manifier" className={styles.biggerImage} style={{backgroundImage: `url(${url})`}} />
</div>
Copy the code

JavaScript code

The JS code is divided into two parts

1) Monitor the movement of the mouse on the original image

const listenBackMousemove = (e: globalThis.MouseEvent) => { if (! manifier || ! background) return let left = e.offsetX - manifier.offsetWidth / 2, top = e.offsetY - manifier.offsetHeight / 2 if (left < 0) left = 0 else if (left > background.offsetWidth - manifier.offsetWidth) left = background.offsetWidth - manifier.offsetWidth if (top < 0) top = 0 else if (top > background.offsetHeight - manifier.offsetHeight) top = background.offsetHeight - manifier.offsetHeight manifier.style.visibility = 'visible' manifier.style.left = left + 'px' manifier.style.top = top + 'px' imgMove(left, top) }Copy the code

2) Reverse calculate the distance the enlarged picture should move according to the distance the mouse moves on the original picture

const imgMove = (left: number, top: number) => { if (! bigger || ! background || ! manifier) return const imgWidth = bigger.offsetWidth const imgHeight = bigger.offsetHeight const backHeight = background.offsetHeight const backWidth = background.offsetWidth const manHeight = manifier.offsetHeight const manWidth = manifier.offsetWidth const rateX = left / (backWidth - manWidth) const rateY = top / (backHeight - manHeight) let imgLeft = -(rateX * (imgWidth - manWidth)), imgTop = -(rateY * (imgHeight - manHeight)) if (imgLeft > 0) imgLeft = 0 else if (imgLeft < -(imgWidth - manWidth)) imgLeft = -(imgWidth - manWidth) if (imgTop > 0) imgTop = 0 else if (imgTop < -(imgHeight - manHeight)) imgTop = -(imgHeight - manHeight) manifier.style.backgroundPosition = `${imgLeft}px ${imgTop}px` }Copy the code

CSS part code

.originImage { background-position: center center; background-size: contain; background-repeat: no-repeat; position: relative; & > img:nth-child(1) { width: 100%; height: auto; visibility: hidden; } & > img:nth-child(2) { width: auto; height: auto; position: absolute; left: -9999px; top: 0; } .biggerImage { position: absolute; width: 100px; height: 100px; border: 1px solid #ededed; border-radius: 10px; cursor: none; pointer-events: none; }}Copy the code

One thing to note in the CSS section is that you need to set the mouse property of the mouse magnifying glass to None, the penetration effect, so that movement over the background image is not affected. Otherwise you might walk into the mouseover event in the mouse magnifying glass area