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 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:
|
<<: Solution to the problem "/bin/sh: pip: command not found" during Dockerfile build
>>: How to import SQL files in Navicat Premium
Recommend
Example code for implementing equal height layout in multiple ways with CSS
The equal height layout described in this article...
Detailed explanation of Nginx Location configuration (Location matching order)
Location means "positioning", which is ...
Tutorial on installing mysql5.7.17 via yum on redhat7
The RHEL/CentOS series of Linux operating systems...
The difference between Decimal type and Float Double in MySQL (detailed explanation)
MySQL has non-standard data types such as float a...
Pycharm2017 realizes the connection between python3.6 and mysql
This article shares with you how to connect pytho...
Detailed explanation of browser negotiation cache process based on nginx
This article mainly introduces the detailed proce...
Display mode of elements in CSS
In CSS, element tags are divided into two categor...
MySQL 8.0.15 installation and configuration method graphic tutorial (Windows 10 X64)
What I have been learning recently involves knowl...
Detailed explanation of vue-router 4 usage examples
Table of contents 1. Install and create an instan...
Solve the problem of MySQL 8.0 still prompting Access denied even though the input is correct
I started learning MySQL recently. The installati...
MySQL green version setting code and 1067 error details
MySQL green version setting code, and 1067 error ...
Summary of Node.js service Docker container application practice
This article will not explain the use and install...
Sample code for making desktop applications with vue + Electron
1.vue packaging Here we use the vue native packag...
VUE implements timeline playback component
This article example shares the specific code of ...
How to solve the problem of installing VMware tools under VMware and the installation file not appearing
VMware tools provides great convenience for using...