How to create a magnifying glass effect for JD product details
JingdongMagnifying glass effect
- DOM operations in javascript.
- The acquisition of time in JavaScript mainly includes mouseenter, mouseleave, and the onmousemove event when the mouse moves on the photo, as well as the attributes clientY, clientX, and acquisition in the event object. Element width offsetWidth, offsetHight, etc.
- It is best to consider the absolute positioning and the calculation of magnification. The magnification formula used in it (the area of the magnified area in the small frame/the area of the small frame) = (large frame area/area of the large photo in the large basket) //The principle of a large photo is to put it in a large frame, and set the css style of the large frame to overflow: hidden, so that the area in your small basket can be proportional Displayed in a large frame.
The specific code implementation is as follows
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
*{ margin: 0; padding: 0; }
#small{ float: left; width:450px; height:450px; border: 1px solid black; margin-left: 100px; position:absolute; }
#big{ float: left; width:600px; height:600px; overflow: hidden; border: 1px solid black; position: absolute; left:600px; top: 0px; }
#magnifying{ width: 200px; height:200px; background-color: cornflowerblue; opacity: 0.4; left: 0px; top: 0px; position: absolute; }
#bigImg{ position: absolute; width: 1350px; height:1350px; }
</style>
</head>
<body>
<p id="small">
<img src="/static/imghw/default1.png" data-src="img/1.png" class="lazy" / alt="How to create a magnifying glass effect for JD product details" >//记得将其设置与小框大小一致 <p id="magnifying"></p>
</p>
<p id="big">
<img src="/static/imghw/default1.png" data-src="img/2.jpg" class="lazy" id="bigImg" / alt="How to create a magnifying glass effect for JD product details" >
</p>
<script type="text/javascript">
var small=document.getElementById("small"); var magnifying=document.getElementById("magnifying"); var big=document.getElementById("big"); var bigImg=document.getElementById("bigImg");
small.onmouseenter=function(){
magnifying.style.display="block";
bigImg.style.display="block"
}
small.onmouseleave=function(){
magnifying.style.display="none";
bigImg.style.display="none";
}
small.onmousemove=function(event){
var left=event.clientX-small.offsetLeft-magnifying.offsetWidth/2; var top=event.clientY-small.offsetTop-magnifying.offsetHeight/2; var leftMax=small.offsetWidth-magnifying.offsetWidth; var topMax=small.offsetHeight-magnifying.offsetHeight; //限制鼠标移动的区域
left = left<=0 ? 0 : left;
top = top <=0? 0:top; //限制右边界与下边界
left =left>=leftMax?leftMax:left;
top =top>=topMax?topMax:top;
magnifying.style.left=left+"px";
magnifying.style.top=top+"px"; //核心代码
var imgLef=-left/leftMax *(bigImg.offsetWidth-big.offsetWidth); var imgTop=-top/topMax * (bigImg.offsetHeight-big.offsetHeight);
bigImg.style.left=imgLef+"px";
bigImg.style.top=imgTop+"px";
} </script>
</body></html>Copy after login
This way you can achieve the amplification effect. I hope this can be helpful to everyone. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
*{ margin: 0; padding: 0; }
#small{ float: left; width:450px; height:450px; border: 1px solid black; margin-left: 100px; position:absolute; }
#big{ float: left; width:600px; height:600px; overflow: hidden; border: 1px solid black; position: absolute; left:600px; top: 0px; }
#magnifying{ width: 200px; height:200px; background-color: cornflowerblue; opacity: 0.4; left: 0px; top: 0px; position: absolute; }
#bigImg{ position: absolute; width: 1350px; height:1350px; }
</style>
</head>
<body>
<p id="small">
<img src="/static/imghw/default1.png" data-src="img/1.png" class="lazy" / alt="How to create a magnifying glass effect for JD product details" >//记得将其设置与小框大小一致 <p id="magnifying"></p>
</p>
<p id="big">
<img src="/static/imghw/default1.png" data-src="img/2.jpg" class="lazy" id="bigImg" / alt="How to create a magnifying glass effect for JD product details" >
</p>
<script type="text/javascript">
var small=document.getElementById("small"); var magnifying=document.getElementById("magnifying"); var big=document.getElementById("big"); var bigImg=document.getElementById("bigImg");
small.onmouseenter=function(){
magnifying.style.display="block";
bigImg.style.display="block"
}
small.onmouseleave=function(){
magnifying.style.display="none";
bigImg.style.display="none";
}
small.onmousemove=function(event){
var left=event.clientX-small.offsetLeft-magnifying.offsetWidth/2; var top=event.clientY-small.offsetTop-magnifying.offsetHeight/2; var leftMax=small.offsetWidth-magnifying.offsetWidth; var topMax=small.offsetHeight-magnifying.offsetHeight; //限制鼠标移动的区域
left = left<=0 ? 0 : left;
top = top <=0? 0:top; //限制右边界与下边界
left =left>=leftMax?leftMax:left;
top =top>=topMax?topMax:top;
magnifying.style.left=left+"px";
magnifying.style.top=top+"px"; //核心代码
var imgLef=-left/leftMax *(bigImg.offsetWidth-big.offsetWidth); var imgTop=-top/topMax * (bigImg.offsetHeight-big.offsetHeight);
bigImg.style.left=imgLef+"px";
bigImg.style.top=imgTop+"px";
} </script>
</body></html>Detailed explanation of the constructor pattern of JS design patterns
Why should the front end use modularity?
Web front-end solution to browser compatibility issues
The above is the detailed content of How to create a magnifying glass effect for JD product details. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What are the benefits of 'JD.com' plus membership?
Feb 27, 2024 am 08:10 AM
JD Plus members enjoy many preferential benefits, such as free trials, exclusive discounts, free shipping, etc. Let me introduce you to the specific benefits of JD Plus membership in detail, so that you can worry more and save money when shopping. What are the benefits of being a JD Plus member? 1. The lowest price of the year: Members can enjoy the lowest price and get more discounts when purchasing goods. 2. Free to use: Some free trial products will be distributed to members, so they can try different things. 3. Delivery priority: It can have faster delivery speed and can get the goods faster than ordinary users. 4. Dedicated customer service: We can provide an exclusive customer service who can answer users’ questions promptly if they have any questions.
How to check the authenticity of JBL headphones
Dec 29, 2023 pm 10:54 PM
JBL headphones are the first choice for many music listening users, with rave reviews, but everyone is still very afraid of fakes. So how can you check the authenticity of JBL headphones to avoid this problem? Let’s see how to query below. How to check the authenticity of jbl headphones: 1. First enter the "China Product Information Verification Center". 2. Then enter the query code to check whether it is correct and determine whether it is genuine. 3. You can also distinguish it by the clarity of the earphone sound. The sound of genuine headphones is very clear and the sound quality will not change. The sound of counterfeit headphones will have a lot of adulteration, and the sound quality is also very poor. 4. You can turn up the sound of your headphones to the maximum to see if it is harmonious. The sound of real headphones is the same. But the sound of the fake headphones is on
Does Bluetooth 5.3 require mobile phone support? For details please see
Jan 14, 2024 pm 04:57 PM
When we buy a mobile phone, we will see that there is a Bluetooth support option in the mobile phone parameters. Sometimes we will encounter a situation where the purchased Bluetooth headset does not match the mobile phone. So does Bluetooth 5.3 need to be supported by the mobile phone? In fact, it is not necessary. Does Bluetooth 5.3 require mobile phone support? Answer: Bluetooth 5.3 requires mobile phone support. However, any mobile phone that supports Bluetooth can be used. 1. Bluetooth is backward compatible, but using the corresponding version requires mobile phone support. 2. For example, if we buy a wireless Bluetooth headset using Bluetooth 5.3. 3. Then, if our mobile phone only supports Bluetooth 5.0, then Bluetooth 5.0 is used when connecting. 4. Therefore, we can still use this mobile phone to connect headphones to listen to music, but the speed is not as good as Bluetooth.
Analysis of frequently asked questions about Cyberpunk 2077
Jan 05, 2024 pm 06:05 PM
Recently, a super popular game Cyberpunk 2077 has been launched online. Many users are rushing to download and experience it. However, there are still many problems in the process. Today we bring you some frequently asked questions about playing Cyberpunk 2077. Come and see if you want anything. Frequently asked questions about playing Cyberpunk 2077: 1. Price details: 1. The purchase price on the steam game platform is: 298 yuan. 2. The purchase price of the epic game platform is: 43 US dollars = 282 yuan. 3. The purchase price of ps4 game terminal is: 400 yuan + HKD and 380 yuan + RMB boxed. 4. The purchase price of Russia in the Russian area is: 172 yuan. 2. Configuration details: 1. Minimum configuration (1080P): GT
How to close Baitiao on 'Jingdong'
Feb 27, 2024 am 09:22 AM
You can close JD Baitiao through the following steps: 1. Open JD APP; 2. Click on the "My" page; 3. Select "JD Baitiao"; 4. Click "Repay"; 5. Select "Close Baitiao"; 6. According to Prompt to complete the operation. This way you can easily close Jingdong Baitiao. How to close Jingdong Baitiao 1. First, we open Jingdong, click on My in the lower right corner, and then click on the Baitiao as shown in the picture. 2. Let’s click on My in the lower right corner, as shown in the picture. 3. Then we click on More Settings as shown in the picture. 4. We click Other in More Settings. 5. Then we click the logout white bar at the bottom. 6. Finally, we select the reason and click Continue to log out to close Jingdong Baitiao.
JD.com further upgrades its 'free door-to-door return and exchange” freight insurance service, which is expected to be fully launched by the end of August
Aug 14, 2024 am 10:09 AM
This website reported on August 13 that in order to improve consumers’ shopping experience and provide merchants with more convenient and efficient after-sales service order management tools, JD.com launched a “free door-to-door return and exchange” service in April this year. Note on this site: The "free door-to-door return and exchange" service means that after the merchant has signed up for "freight insurance (upgraded version)" to activate the "free door-to-door return and exchange" service, the consumer initiates a return or exchange for the goods with the "free door-to-door return and exchange" logo displayed at the front desk. When requesting goods, the insurance company provides insurance services for the one-way shipping fee incurred for returns and exchanges. When the freight insurance is met (including seller's freight insurance and buyer's freight insurance), the delivery person will not charge freight to the customer when picking up the package, nor will the merchant charge freight after picking up the package. Instead, the insurance company will pay the compensation directly to Beijing Delivery , the details page will prompt that the shipping amount is 0. Now
JD Express Inquiry Portal
Feb 23, 2024 pm 03:43 PM
In the JD Express Inquiry Portal, we can easily check our current express delivery status through the website and learn the corresponding information. You can query through [https://www.jdl.com/orderSearch/?waybillCodes=]. This introduction to the express query portal website URL can tell you how to operate it. The following is a detailed introduction, come and take a look! JD Express Inquiry Entrance Answer: [https://www.jdl.com/orderSearch/?waybillCodes=] Details: 1. Go to the website [https://www.jdl.com/orderSearch
How to operate Jingdong's refund only
Feb 24, 2024 am 11:49 AM
How does Jingdong only refund? Jingdong can set the purchased items to be refund only, but most friends don’t know how to operate Jingdong’s refund only. Next is the Jingdong refund only method brought by the editor to users. There is a graphic tutorial on how to do this. Interested users can come and take a look! Jingdong usage tutorial How to operate Jingdong only refund 1. First open the Jingdong APP and enter the [My] area in the lower right corner of the main interface; 2. Then select the [My Order] function in the My area; 3. Finally, select only For refund orders, click [Apply for Refund] to complete the operation.
