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
Solution to the problem of not being able to obtain the hostname of the host in the docker container
The test is passed in the nodejs environment. The...
HTML uses form tags to implement the registration page example code
Case Description: - Use tables to achieve page ef...
A brief analysis of the use of zero copy technology in Linux
This article discusses several major zero-copy te...
Vue uses Amap to realize city positioning
This article shares the specific code of Vue usin...
Vue batch update dom implementation steps
Table of contents Scene Introduction Deep respons...
How to write a MySQL backup script
Preface: The importance of database backup is sel...
CSS3 simple cutting carousel picture implementation code
Implementation ideas First, create a parent conta...
JavaScript custom calendar effect
This article shares the specific code of JavaScri...
CSS3+Bezier curve to achieve scalable input search box effect
Without further ado, here are the renderings. The...
Learn more about using regular expressions in JavaScript
Table of contents 1. What is a regular expression...
How to configure tomcat server for eclipse and IDEA
tomcat server configuration When everyone is lear...
An example of changing traditional replication to GTID replication without stopping business in MySQL 5.7
Due to the advantages of GTID, we need to change ...
The process of deploying a project to another host using Jenkins
environment Hostname ip address Serve Jenkins 192...
Detailed explanation of CSS image splicing technology (sprite image)
CSS image splicing technology 1. Image stitching ...
Detailed explanation of the implementation method of database multi-table connection query
Detailed explanation of the implementation method...