HTML+CSS+JavaScript實現(xiàn)放大鏡效果

更新時間：2022年07月04日 09:04:56 作者：@半島鐵盒@

這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了HTML+CSS+JavaScript實現(xiàn)放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下

效果演示

JS 詳解

HTML 和 CSS 部分放在了文章最后的源代碼中，這里只對 JS 部分進行詳解！

首先，需要獲取操作的對象：

圖片展示框（鼠標移入事件）
放大鏡（顯示和跟隨鼠標）
放大鏡中的圖片（改變位置）

let imgShow = document.querySelector('.img-show'); ?// 圖片展示框
let imgLarge = document.querySelector('.img-large'); ? ?// 放大鏡
let img = document.querySelector('img'); ? ?// 放大鏡中圖片

給圖片展示框添加事件監(jiān)聽器，鼠標移入圖片展示框時，顯示放大鏡：

imgShow.addEventListener('mouseover', function() {
? ? // 鼠標移入圖片時，顯示放大鏡
? ? imgLarge.style.display = "block";
});

鼠標在圖片展示框中移動時的事件監(jiān)聽器：

imgShow.addEventListener('mousemove', function(event) {
? ? // 計算鼠標在圖片展示框中相對位置
? ? let x = event.pageX - this.offsetLeft;
? ? let y = event.pageY - this.offsetTop;
});

注意：打印出 x，y 的值會發(fā)現(xiàn)，鼠標相對圖片展示框的位置會出現(xiàn)負值，如下圖所示：

而理論上應該都是正值，這是因為圖片展示框采用的是 absolute 定位，并且用 transform 進行二次平移實現(xiàn)了水品垂直居中，我們先暫時將 transform 的平移效果注釋掉，再次打印 x，y 的值：

發(fā)現(xiàn)相對位置全部變成了正值，由此可見：transform 平移的位置是不影響 ofsetLeft 和 offsetTop 的值。對于absolute 定位，ofsetLeft 和 offsetTop 依舊使用原始位置的值，并且坐標系也不會發(fā)生改變，依舊是原始位置的左上角，這就是為什么會出現(xiàn)負值，用一張動圖來形容一下鼠標相對位置參考坐標系：

如果理解了 x 和 y 的值如何決定，就可以進行下一步了，下面會根據(jù) x 和 y 的值進行一些數(shù)學計算！

接下來實現(xiàn)放大鏡跟隨鼠標移動：

// 放大鏡跟隨鼠標移動
imgLarge.style.left = (x + 480 - 125)+'px';
imgLarge.style.top = (y + 270 - 125)+'px';

根據(jù)上述的坐標系，（x + 480）是為了讓放大鏡始終跟隨鼠標，（ - 125）是為了讓鼠標始終保持在放大鏡中間，因為放大鏡的寬為 250px。如果不理解，可以先把 +480 和 -125 去掉查看效果，然后逐個加上去再查看效果。這里不再演示！

限制放大鏡的查看范圍：

// 放大鏡超出范圍后消失
if (x < -480 || x > 480 || y < -270 || y > 270) {
? ? imgLarge.style.display = "none";
}

放大鏡中圖片的移動：

// 放大鏡中圖片位置的移動
img.style.left = (-(x+480)*2 + 125)+'px';
img.style.top = (-(y+270)*2 + 125)+'px';

原理就是計算出兩個圖片之間的比例，然后根據(jù)鼠標在圖片展示框中的相對位置，計算出放大鏡中圖片的位置偏移量，讓放大鏡中的圖片實現(xiàn)移動。

（x+480）回歸原始位置坐標系
*2 是兩張圖片的比例
-(x+480)*2 加負號是為了同方向移動，不然移動方向是相反的，可以自行嘗試！
+125 如果不加的話你會發(fā)現(xiàn)放大位置和原始位置對不上，可以自行嘗試！

源代碼

<!DOCTYPE html>
<head>
? ? <meta charset="UTF-8">
? ? <title>放大鏡效果</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? }
? ? ? ? body {
? ? ? ? ? ? background: url(./images/bg.jpg);
? ? ? ? ? ? background-size: cover;
? ? ? ? }
? ? ? ? /* 背景圖片高斯模糊 */
? ? ? ? body::before {
? ? ? ? ? ? content: "";
? ? ? ? ? ? position: absolute; /* 一定要用絕對定位 */
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? backdrop-filter: blur(30px); /* 模糊半徑 */
? ? ? ? }
? ? ? ? .img-show {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? width: 960px;
? ? ? ? ? ? height: 540px;
? ? ? ? ? ? border: 2px solid #bebebe;
? ? ? ? ? ? border-radius: 15px;
? ? ? ? ? ? box-shadow: 8px 8px 20px rgba(0, 0, 0, .3), -8px -8px 20px rgba(0, 0, 0, .3);
? ? ? ? ? ? background: url(./images/show.jpg);
? ? ? ? ? ? background-size: cover;
? ? ? ? }
? ? ? ? .img-show .img-large {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 250px;
? ? ? ? ? ? height: 250px;
? ? ? ? ? ? border: 2px solid #bebebe;
? ? ? ? ? ? border-radius: 125px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? background-color: #fff;
? ? ? ? }
? ? ? ? /* 放大鏡中間的準心 */
? ? ? ? .img-show .img-large::after {
? ? ? ? ? ? content: "+";
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? color: #3e3e3e;
? ? ? ? ? ? font-size: 30px;
? ? ? ? }
? ? ? ? /* 放大鏡顯示時隱藏鼠標指針 */
? ? ? ? .img-show .img-large:hover {
? ? ? ? ? ? cursor: none;
? ? ? ? }
? ? ? ? .img-show .img-large img {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 1920px;
? ? ? ? ? ? border-radius: 15px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="img-show">
? ? ? ? <div class="img-large">
? ? ? ? ? ? <img src="./images/show.jpg" alt="">
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? // 獲取需要操作的對象
? ? ? ? let imgShow = document.querySelector('.img-show');
? ? ? ? let imgLarge = document.querySelector('.img-large');
? ? ? ? let img = document.querySelector('img');
?
? ? ? ? // 鼠標移入圖片時，顯示放大鏡
? ? ? ? imgShow.addEventListener('mouseover', function() {
? ? ? ? ? ? imgLarge.style.display = "block";
? ? ? ? });
?
? ? ? ? // 放大鏡跟隨鼠標移動
? ? ? ? imgShow.addEventListener('mousemove', function(event) {
? ? ? ? ? ? // 計算鼠標在圖片展示框中相對位置
? ? ? ? ? ? let x = event.pageX - this.offsetLeft;
? ? ? ? ? ? let y = event.pageY - this.offsetTop;
? ? ? ? ? ? // 放大鏡跟隨鼠標移動
? ? ? ? ? ? imgLarge.style.left = (x + 480 - 125)+'px';
? ? ? ? ? ? imgLarge.style.top = (y + 270 - 125)+'px';
? ? ? ? ? ? // 放大鏡超出范圍后消失
? ? ? ? ? ? if (x < -480 || x > 480 || y < -270 || y > 270) {
? ? ? ? ? ? ? ? imgLarge.style.display = "none";
? ? ? ? ? ? }
? ? ? ? ? ? // 放大鏡中圖片位置的移動
? ? ? ? ? ? img.style.left = (-(x+480)*2 + 125)+'px';
? ? ? ? ? ? img.style.top = (-(y+270)*2 + 125)+'px';
? ? ? ? });
? ? </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: