JavaScript imitates Jingdong magnifying glass special effects

This article shares the specific code of JavaScript imitating Jingdong magnifying glass for your reference. The specific content is as follows

Functional requirements:

1. Divided into three modules
2. When the mouse passes over the small picture box, the yellow mask layer and the large picture box are displayed. Leave the function of hiding the two boxes.
3. The yellow occlusion layer moves with the mouse
4. Move the yellow occlusion layer, and the large image will follow the movement

Large image moving distance = (blocking layer moving distance * large image maximum moving distance) / blocking layer maximum moving distance

<style>
      body,
      div {
        margin: 0;
        padding: 0;
      }
      .product {
        position: relative;
        width: 400px;
        height: 400px;
        margin: 50px 0 0 20px;
        border: 1px solid #000;
      }
      .preview_img img {
        width: 300px;
        height: 300px;
        margin: 50px 50px;
      }
      .mask {
        position: absolute;
        display: none;
        top: 20px;
        left: 30px;
        width: 80px;
        height: 80px;
        background-color: yellow;
        opacity: 0.5;
        cursor: move;
      }
      .big {
        position: absolute;
        display: none;
        left: 410px;
        top: 0;
        width: 500px;
        height: 500px;
        z-index: 999;
        overflow: hidden;
      }
      .bigimg {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 400px;
      }
    </style>
    <!-- Import js file-->
    <script src="detail.js"></script>
  </head>
  <body>
    <div class="product">
      <div class="preview_img">
        <img src="images/xs.jpg" alt="" />
        <div class="mask"></div>
        <div class="big">
          <img src="images/xs.jpg" alt="" class="bigImg" />
        </div>
      </div>
    </div>
</body>

JS page

//Page preloading window.addEventListener("load", function () {
  var preview_img = document.querySelector(".preview_img");
  var mask = document.querySelector(".mask");
  var big = document.querySelector(".big");

  //1. When the mouse passes over preview_img, the mask occlusion layer and the big box are displayed and hidden preview_img.addEventListener("mouseover", function () {
    mask.style.display = "block";
    big.style.display = "block";
  });
  preview_img.addEventListener("mouseout", function () {
    mask.style.display = "none";
    big.style.display = "none";
  });
  //It is inappropriate to give the mouse coordinates to the occlusion layer, because the occlusion layer coordinates are based on the parent box preview_img.addEventListener("mousemove", function (e) {
    //(1) First calculate the coordinates of the mouse in the box var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    //(2) Subtract half of the box's height and width //(3) The distance the mask moves var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;
    //(4) If the coordinate is less than 0, let it stop at position 0 (that is, stop when it exceeds the box range)
    var egdeX = preview_img.offsetWidth - mask.offsetWidth;
    var egdeY = preview_img.offsetHeight - mask.offsetHeight;
    if (maskX <= 0) {
      maskX = 0;
    } else if (maskX >= egdeX) {
      maskX = egdeX;
    }
    if (maskY <= 0) {
      maskY = 0;
    } else if (maskY >= egdeY) {
      maskY = egdeY;
    }
    mask.style.left = maskX + "px";
    mask.style.top = maskY + "px";
    //The moving distance of the big picture = the moving distance of the occluding layer * the maximum moving distance of the big picture / the maximum moving distance of the occluding layer var bigImg = document.querySelector(".bigImg");
    //The maximum moving distance of the big picture var bigMax = bigImg.offsetWidth - big.offsetWidth;
    //The moving distance xy of the large image
    var bigX = (maskX * bigMax) / egdeX;
    var bigY = (maskY * bigMax) / egdeY;
    bigImg.style.left = -bigX + "px";
    bigImg.style.top = -bigY + "px";
  });
});

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript imitates Jingdong magnifying glass effect
js imitates Jingdong magnifying glass effect
JavaScript implements Jingdong magnifying glass effect
Pure js imitates Taobao Jingdong product magnifying glass function
Javascript imitates the effect of Jingdong magnifying glass
Using JavaScript to implement Jingdong magnifying glass effect

<<: Solution to the problem "/bin/sh: pip: command not found" during Dockerfile build

>>: How to import SQL files in Navicat Premium

JavaScript imitates Jingdong magnifying glass special effects

Javascript front-end optimization code

Introduction to Docker Quick Deployment of SpringBoot Project

Detailed explanation of MySQL installation and new password authentication method in MySQL 8.0

MySQL joint table query basic operation left-join common pitfalls

MySQL 8.0.12 installation and configuration method graphic tutorial

Centos7.3 How to install and deploy Nginx and configure https

Summary of new usage of vi (vim) under Linux

What is WML?

JavaScript static scope and dynamic scope explained with examples

React sample code to implement login form

Recommend

MySQL 5.7.20 compressed version download and installation simple tutorial

How to implement encryption and decryption of sensitive data in MySQL database

Design and implementation of Vue cascading drop-down box

The benefits of div+css and web standard pages

Implementation of react routing guard (routing interception)

Introduction to who command examples in Linux

MySQL query learning basic query operations

Detailed explanation of Nginx static service configuration (root and alias instructions)

Common failures and reasons for mysql connection failure

File backup solution between servers, how to automatically back up server files to another server?

Database issues and pitfalls in connecting to cloud servers with Navicat Premium15

Creating a Secondary Menu Using JavaScript

The DOCTYPE mode selection mechanism of well-known browsers

CSS style control to achieve IE submission form record history click return information is still there

Tomcat configuration and how to start it in Eclipse