magnifierrentgen（放大镜）插件的使用

效果图如下：

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>