如何做出京東商品詳情的放大鏡效果
京東放大鏡效果
實作放大鏡主要知識點
javascript中DOM操作。
javascript中時間的獲取，主要有mouseenter、mouseleave、以及當滑鼠在照片上移動的時候onmousemove事件以及其中的事件物件中的屬性clientY，clientX,還有獲取元素寬度offsetWidth、offsetHight等。
這裡面好考慮到絕對定位，以及放大倍率的計算，裡面用到的倍率計算公式（小框裡面的放大區域面積/小框面積）=（大框的面積/大籃裡的大照片的面積）//大照片的原理是將其放在大框裡，將大框的css樣式設置為overflow：hidden,這樣可以將你小筐裡的區域按比例顯示在大框裡面。
具體程式碼實作如下
<!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="如何做出京東商品詳情的放大鏡效果" >//记得将其设置与小框大小一致 <p id="magnifying"></p>
</p>
<p id="big">
<img src="/static/imghw/default1.png" data-src="img/2.jpg" class="lazy" id="bigImg" / alt="如何做出京東商品詳情的放大鏡效果" >
</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>這樣就可以實現放大效果啦，希望這些能對對大家有幫助。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是如何做出京東商品詳情的放大鏡效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
《京東》plus會員有什麼好處
Feb 27, 2024 am 08:10 AM
京東plus會員享有許多優惠福利，例如免費試用、專屬折扣、免費送貨等等。以下就為大家詳細介紹京東plus會員的具體好處，讓你在購物時更省心、更省錢。京東plus會員有什麼好處1、全年最低價：能讓會員享受最低的價格，在購買商品的時候會更加的優惠。 2.免費使用：會有一些免費的試用產品會發給會員，可以嘗試不同的東西。 3.配送優先：能夠有更快的配送速度，可以比一般的使用者更快的拿到商品。 4.專屬客服：可以提供一個專屬客服，有什麼問題，都是能夠及時的回答用戶。
如何查證JBL耳機的真假訊息
Dec 29, 2023 pm 10:54 PM
jbl耳機是許多聽音樂用戶的首選，好評如潮，但是對於假貨大家還是非常的害怕的，那麼jbl耳機怎麼查詢真偽來避免這個問題呢？下面就看看怎麼查詢吧。 jbl耳機怎麼查詢真偽：1、先進入「中國商品資訊驗證中心」。 2、然後輸入查詢碼，即可查看是否正確從而判斷是不是真貨。 3.也可以透過耳機聲音的清晰度來分辨。正牌的耳機聲音是非常的清晰的，音質也不會出現改變。假牌的耳機聲音會有很多的摻雜，音質也是特別的差。 4.大家可以將自己的耳機聲音開到最大，看看是不是很和諧，真耳機聲音都是一樣的。但是假耳機的聲音開
藍牙5.3要求手機支援嗎？詳細資訊請看
Jan 14, 2024 pm 04:57 PM
我們在買手機的時候，會看到手機參數裡有一個支援藍牙選項，有時候就會遇到購買的藍牙耳機和手機不匹配的情況，那麼藍牙5.3需要手機支援嗎，其實是不需要的。藍牙5.3需要手機支援嗎：答：藍牙5.3需要手機支援。不過只要支援藍牙的手機就可以使用。 1.藍牙是向下相容的，不過要使用對應版本就需要手機支援。 2.舉例來說，如果我們購買了一款使用藍牙5.3的無線藍牙耳機。 3.那麼，如果我們的手機只支援藍牙5.0，那麼在連線時使用的就是藍牙5.0。4、因此，我們依舊是可以使用這款手機連接耳機來聽歌的，但是速度不如藍
賽博朋克2077常見的問題解析
Jan 05, 2024 pm 06:05 PM
最近一款超級火爆的遊戲賽博朋克2077上線很多的用戶都爭先恐後的進行了下載體驗，但是在這過程中還是有著很多的問題的，今天就給你們帶來了玩賽博朋克2077常見問題，快來看看有沒有要的吧。玩賽博朋克2077常見問題：一、價格詳情：1、steam遊戲平台的購買價格為：298元人民幣。 2.epic遊戲平台的購買價格為：43美元=282元。 3.ps4遊戲端的購買價格為：400元+HKD以及380元+RMB盒裝。 4.俄區俄羅斯的購買價格為：172元人民幣。二、配置詳情：1、最低配置（1080P）：GT
《京東》白條怎麼關閉
Feb 27, 2024 am 09:22 AM
關閉京東白條可以透過以下步驟：1.開啟京東APP；2.點選「我的」頁面；3.選擇「京東白條」；4.點選「還款」；5.選擇「關閉白條」；6.根據提示完成操作。這樣就能方便地關閉京東白條了。京東白條怎麼關閉1、首先我們打開京東，點擊右下角我的，再點擊如圖所示的白條。 2、我們點選右下角我的，如圖所示。 3.接著我們點選如圖所示的更多設定。 4、我們在更多設定中點選其他。 5、然後我們點擊底部的註銷白條。 6.最後我們選擇原因，點擊繼續註銷即可關閉京東白條了。
京東進一步升級「免費上門退換」運費險服務，預計 8 月底全面上線
Aug 14, 2024 am 10:09 AM
本站8月13日消息，為提升消費者的購物體驗，為商家提供更便捷有效率地售後服務單管理工具，京東今年4月推出了「免費上門退換」服務。本站註：「免費到府退換」服務是指商家透過簽約投保「運費險（升級版）」開立「免費上門退換」服務後，對於在前台展示「免費上門退換」標識的商品，消費者發起退換貨請求時，保險公司對退換貨產生的單程運費提供保險服務。符合運費險時（含賣家運費險及買家運費險），配送員上門取件時不會向客戶收取運費，取件後也不會向商家收取運費，而是由保險公司直接賠付給京配，詳情頁會提示運費金額為0。現在
京東快遞查詢入口
Feb 23, 2024 pm 03:43 PM
在京東快遞查詢入口中，我們可以輕鬆透過網站查詢自己目前的快遞情況，了解到對應資訊內容。可以透過【https://www.jdl.com/orderSearch/?waybillCodes=】來進行查詢。這篇快遞查詢入口網站網址的介紹就能夠告訴大家具體該如何操作，以下就是詳細的介紹，趕緊來看看吧！京東快遞查詢入口答：【https://www.jdl.com/orderSearch/?waybillCodes=】詳情介紹：1、前往網站【https://www.jdl.com/orderSearch
京東僅退款怎麼操作
Feb 24, 2024 am 11:49 AM
京東只退款怎麼操作?京東是可以把購買的物品設置僅退款的，但是多數的小伙伴不知道京東中的僅退款如何的操作，接下來就是小編為用戶帶來的京東僅退款操作方法圖文教程，有興趣的用戶快來一起看看吧！京東使用教學京東僅退款怎麼操作1、先打開京東APP，主介面右下角【我的】專區進入;2、然後我的專區中選擇其中的【我的訂單】功能;3、最後選擇需要僅退款的訂單，點選【申請退款】即可操作完成。
