效果圖如下：

1.引入jQuery和jQuery.MagnifierRentgen.min.js以及jQuery.MagnifierRentgen.min.css

<!-- 引入css --><link rel="stylesheet" href="./jQuery.MagnifierRentgen.min.css"><!-- 引入js --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="./jQuery.MagnifierRentgen.min.js"></script>

2.該放大鏡插件有2個圖層，上面的為原圖，使用data-image屬性來指定，下面的是放大的圖片，使用data-image-zoom屬性來指定，結構如下：

<div class="test-plugin" data-image="./img.jpg" data-image-zoom="./img.jpg" data-size="150"></div></div>

3.在頁面DOM元素加載完畢之后，可以通過magnifierRentgen()方法來初始化該圖片放大鏡插件

<script>$(".test-plugin").magnifierRentgen();</script>

備注：

若需修改放大鏡的樣式，可在jQuery.MagnifierRentgen.min.css里面搜索關鍵字border-radius或者border來進行快速查找類名或者id名從而進行樣式修改（修改放大鏡的類名為magnifier-loupe）

修改后的樣式：

<style>.magnifier-loupe{border-radius: 0 !important; /* 樣式不生效則添加上!important */border:1px solid #fff !important;}</style>

總結

以上是生活随笔為你收集整理的magnifierrentgen（放大镜）插件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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