JavaScript仿京東放大鏡特效
本文實(shí)例為大家分享了JavaScript仿京東放大鏡的具體代碼,供大家參考,具體內(nèi)容如下
功能需求:
1、分為三個(gè)模塊
2、鼠標(biāo)經(jīng)過(guò)小圖片盒子,黃色的遮擋層和大圖片盒子顯示,離開(kāi)隱藏兩個(gè)盒子功能
3、黃色的遮擋層跟隨著鼠標(biāo)移動(dòng)
4、移動(dòng)黃色遮擋層,大圖片跟隨著移動(dòng)
大圖片移動(dòng)距離=(遮擋層移動(dòng)距離*大圖片最大移動(dòng)距離)/ 遮擋層最大移動(dòng)距離
<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; } .big img { position: absolute; top: 0; left: 0; width: 400px; height: 400px; } </style> <!-- 引入js文件 --> <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頁(yè)面
//頁(yè)面預(yù)加載 window.addEventListener("load", function () { var preview_img = document.querySelector(".preview_img"); var mask = document.querySelector(".mask"); var big = document.querySelector(".big"); //1.鼠標(biāo)經(jīng)過(guò) preview_img 就顯示和隱藏 mask 遮擋層 和 big 大盒子 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"; }); //把鼠標(biāo)坐標(biāo)給遮擋層是不合適的,因?yàn)檎趽鯇幼鴺?biāo)以父盒子為準(zhǔn) preview_img.addEventListener("mousemove", function (e) { //(1)先計(jì)算出鼠標(biāo)在盒子內(nèi)的坐標(biāo) var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; //(2)減去盒子高度寬度的一半 //(3)mask 移動(dòng)的距離 var maskX = x - mask.offsetWidth / 2; var maskY = y - mask.offsetHeight / 2; //(4)如果坐標(biāo)小于0 就讓他停在 0 的位置(即超出盒子范圍就停止) 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"; //大圖片的移動(dòng)距離 = 遮擋層移動(dòng)距離*大圖片最大移動(dòng)距離 / 遮擋層的最大移動(dòng)距離 var bigImg = document.querySelector(".bigImg"); //大圖片最大移動(dòng)距離 var bigMax = bigImg.offsetWidth - big.offsetWidth; //大圖片的移動(dòng)距離 x y var bigX = (maskX * bigMax) / egdeX; var bigY = (maskY * bigMax) / egdeY; bigImg.style.left = -bigX + "px"; bigImg.style.top = -bigY + "px"; }); });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript圖片上傳并預(yù)覽的完整實(shí)例
上傳是個(gè)老生常談的話題了,多數(shù)情況下各位想必用的是uplodify,webUploader之類的插件,這篇文章主要給大家介紹了關(guān)于JavaScript圖片上傳并預(yù)覽的相關(guān)資料,需要的朋友可以參考下2022-01-01bootstrap table插件動(dòng)態(tài)加載表頭
這篇文章主要為大家詳細(xì)介紹了bootstrap table插件動(dòng)態(tài)加載表頭,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07將rmb數(shù)字位錢數(shù)轉(zhuǎn)化為中文錢數(shù)的js函數(shù)
用力將用戶輸入的錢數(shù),中文化輸出的函數(shù)代碼,需要的朋友可以參考下。2010-07-07layer 刷新某個(gè)頁(yè)面的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layer 刷新某個(gè)頁(yè)面的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09uni-file-picker文件選擇上傳功能實(shí)現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07JS實(shí)現(xiàn)點(diǎn)擊復(fù)選框變更DIV顯示狀態(tài)的示例代碼
下面小編就為大家分享一篇JS實(shí)現(xiàn)點(diǎn)擊復(fù)選框變更DIV顯示狀態(tài)的示例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12基于bootstrap寫的一點(diǎn)localStorage本地儲(chǔ)存
這篇文章主要介紹了基于bootstrap寫的一點(diǎn)localStorage本地儲(chǔ)存,需要的朋友可以參考下2017-11-11javascript中的window.location.search方法簡(jiǎn)介
window.location.search方法是截取當(dāng)前url中“?”后面的字符串,示例如下,感興趣的朋友可以參考下2013-09-09