當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

js hover图片放大不遮挡_CSS3+JS 实现放大镜

發布時間：2023/12/2 javascript 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 js hover图片放大不遮挡_CSS3+JS 实现放大镜小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

注意：

看懂本文需要：
- 懂中文：)
- 學習過 JavaScript 和 css
代碼較長，框框可左右滑動哦
您的觀看和點贊是對本公眾號最大力的支持 ~~

原文鏈接：

https://blog.csdn.net/qq_43624878/article/details/110197749 CSS3+JS完美實現放大鏡模式

效果

test

核心

CSS函數，如：calc() —— 動態計算；var() —— 使用自定義變量
CSS偽元素：::before/after —— 方便控制，而且獨立于文檔流之外，易于渲染
JS API：offsetX/offsetY：相對父節點區域左上角定位
…

其實我們具體要實現的就是：在鼠標移入時顯示出來一個小圓圈(跟著鼠標走)，這個小圓圈到哪，哪里的圖片區域就放大相應的倍數并且顯示在圓圈內。

為什么要用offset API？其實根據上面的描述，我們需要實時獲取鼠標的左偏移量和上偏移量，而這兩個偏移量是相對父節點的。通過左偏移量和上偏移量結合calc()即可計算放大鏡顯示內容相對父節點的顯示位置。不難找到在鼠標事件對象中，js為我們提供了如下API：

screenX/screenY：相對屏幕區域左上角定位，若發生滾動行為，則相對該區域定位
pageX/pageY：相對網頁區域左上角定位
clientX/clientY：相對瀏覽器可視區域左上角定位
offsetX/offsetY：相對父節點區域左上角定位，若無父節點則相對或定位

但相較而言唯一符合要求的就只有offset“相對于父元素”了。

<div?class="bruce">
????<div?class="magnifier">div>
div>
let?magnifier=document.querySelector(".magnifier");
magnifier.addEventListener("mousemove",e=>{
?//控制“鏡子”小圓圈的移動
});

放大鏡顯示內容其實就是將原圖像放大N倍，通過上述偏移量按照比例截取一定區域顯示內容。

先定義相關的css變量。我們設定放大倍率為2.5倍，那么被放大圖像的寬高也是原來寬高的2.5倍。聲明兩個變量，分為為 --x 和 --y ：

圖片以背景圖的形式展示，方便控制大小。

很顯然在這個場景下無需插入子節點作為放大鏡的容器了，使用::before即可！

放大鏡在使用時寬高為100px，不使用時寬高為0。通過絕對定位布局放大鏡隨鼠標移動的位置，即聲明left和top，再通過聲明 transform:translate(-50%,-50%) 將放大鏡補位，使放大鏡中心與鼠標光標位置一致。由于聲明left和top定位放大鏡的位置，還可以聲明 will-change 改善left和top因改變而引發的性能問題！而且用CSS解決這些問題的另一個好處就是：借助于偽元素/偽類，我們可以將一些比較細節的東西用CSS解決，而不是寄托于“繁重”的JavaScript。比如：鼠標移入樣式hover：

.magnifier::before{
????--size:?0;
????position:?absolute;
????left:?var(--x);
????top:?var(--y);
????border-radius:?100%;
????width:?var(--size);
????height:?var(--size);
????box-shadow:?1px?1px?3px?rgba(0,0,0,.5);
????content:?"";
????will-change:?left,top;
????transform:?translate(-50%,-50%);
}
.magnifier:hover::before{
????--size:?100px;
}

接下來使用background實現(展示)放大鏡內容。依據放大倍率為2.5倍，那么可聲明size: --outbox-w --outbox-h，通過 position-x 和 position-y 移動背景即可，最終可連寫成 background:#333 url(背景圖片) no-repeat var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h) 。其中 --scale-x 和 --scale-y 對應 position-x 和 position-y (即background-position)，用于隨著鼠標移動而改變背景位置。

--scale-x:?calc(var(--size)?/?var(--ratio)?-?var(--ratio)?*?var(--x));
--scale-y:?calc(var(--size)?/?var(--ratio)?-?var(--ratio)?*?var(--y));
12

那么上面mousemove函數中改變鏡子的“位置坐標”就可以這么寫了：

e.target.style.setProperty("--x",`${e.offsetX}px`);
e.target.style.setProperty("--y",`${e.offsetY}px`);
12

so eazy~

最終的CSS內容如下：

:root{
????--ratio:?2.5;
????--box-w:?600px;
????--box-h:?400px;
????--outbox-w:?calc(var(--box-w)?*?var(--ratio));
????--outbox-h:?calc(var(--box-h)?*?var(--ratio));
}
.bruce{
????margin-top:?50px;
}
.magnifier{
????--x:0;
????--y:0;
????overflow:?hidden;
????position:?relative;
????width:?var(--box-w);
????height:?var(--box-h);
????background:?url("img/nan.png")?no-repeat?center/100%?100%;
????cursor:?grabbing;
}
.magnifier::before{
????--size:?0;
????--scale-x:?calc(var(--size)?/?var(--ratio)?-?var(--ratio)?*?var(--x));
????--scale-y:?calc(var(--size)?/?var(--ratio)?-?var(--ratio)?*?var(--y));
????position:?absolute;
????left:?var(--x);
????top:?var(--y);
????border-radius:?100%;
????width:?var(--size);
????height:?var(--size);
????background:?#333?url("img/nan.png")?no-repeat?var(--scale-x)?var(--scale-y)/var(--outbox-w)?var(--outbox-h);
????box-shadow:?1px?1px?3px?rgba(0,0,0,.5);
????content:?"";
????will-change:?left,top;
????transform:?translate(-50%,-50%);
}
.magnifier:hover::before{
????--size:?100px;
}

若是::before中想要用一張本身就是2倍大小的圖片，則background中將--outbox-w和--outbox-h替換為原本的--box-w和--box-h 再做適當的微調即可。

！注意看你放大鏡中的內容，它表明不只是簡單的圖片的放大，所以才有了 var(--size) / var(--ratio) 這一段代碼；關于css中修改css3自定義變量：我仍然認為只能在“同級同屬”范圍內才能修改并顯示成功。

完整代碼

已加上注釋，注意修改圖片路徑

html>
<html?lang="en">
<head>
??<meta?charset="UTF-8">
??<title>Titletitle>
??<style>:root?{--ratio:?2.5;?/*?放大倍率?*/--box-w:?600px;?/*?原始寬度?*/--box-h:?400px;?/*?原始高度?*/--outbox-w:?calc(var(--box-w)?*?var(--ratio));?/*?放大后寬度?*/--outbox-h:?calc(var(--box-h)?*?var(--ratio));?/*?放大后高度?*/
????}/*?調一下框框位置?*/.bruce?{margin-top:?50px;
????}/*?界面?*/.magnifier?{--x:?0;--y:?0;overflow:?hidden;?/*?溢出隱藏邊框的內容?*/position:?relative;?/*?相對定位?*/width:?var(--box-w);?/*?應用root定義的寬度?*/height:?var(--box-h);?/*?應用root定義的高度?*//*?注意：如果同時設置了position和size兩個屬性，應該用左斜杠“/”，而不是用空格把兩個參數值隔開：position/size */background:?url("1.jpg")?no-repeat?center/100%?100%;?/*?調整圖片寬高，設置背景圖片居中不重復顯示?*/cursor:?grabbing;?/*?定義鼠標形狀為手勢?*/
????}.magnifier::before?{--size:?0;/*?原圖和放大之后的圖片比例做計算?*/--scale-x:?calc(var(--size)?/?var(--ratio)?-?var(--ratio)?*?var(--x));?/*?顯示放大后圖片的x軸?*/--scale-y:?calc(var(--size)?/?var(--ratio)?-?var(--ratio)?*?var(--y));?/*?顯示放大后圖片的y軸?*//*?絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于:?*/position:?absolute;left:?var(--x);?/*?左距離?*/top:?var(--y);?/*?頂距離?*/border-radius:?100%;?/*?設置為圓形?*/width:?var(--size);?/*?設置放大鏡寬度?*/height:?var(--size);?/*?設置放大鏡高度?*/background:?#333?url("1.jpg")?no-repeat?var(--scale-x)?var(--scale-y)/var(--outbox-w)?var(--outbox-h);/*?設置陰影?*/box-shadow:?1px?1px?3px?rgba(0,?0,?0,?.5);content:?"";?/*?content屬性一般用于:before,?:after偽元素中,用于呈現偽元素的內容?*/will-change:?left,?top;?/*?性能優化?*//*?設置放大鏡?xy向左偏移一半，因為放大鏡本身是一個正方形?*/transform:?translate(-50%,?-50%);
????}.magnifier:hover::before?{--size:?100px;?/*?當選擇鼠標指針浮動在其上的元素，調整樣式?*/
????}style>
head>
<body>
<div?class="bruce">
??<div?class="magnifier">div>
div>
<script>let?magnifier?=?document.querySelector(".magnifier");//?添加鼠標移動事件的監聽
??magnifier.addEventListener("mousemove",?e?=>?{//控制“鏡子”小圓圈的移動
????e.target.style.setProperty("--x",?`${e.offsetX}px`);
????e.target.style.setProperty("--y",?`${e.offsetY}px`);
??});script>
body>
html>

end

您的觀看和點贊是對本公眾號最大力的支持 ~~

總結

以上是生活随笔為你收集整理的js hover图片放大不遮挡_CSS3+JS 实现放大镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 5 linux系统的centos怎么设置
下一篇： python字符串startswith_