jQuery放大镜修改版使用方法

jQuery放大镜

使用方法很简单，插件内也有各种参数。该插件可进行多次开发，希望对各位有用。

html代码

jqzoom是放大镜的类名 是必须的 放在img标签父级元素class内即可。

        <div class="jqzoom">  <!-- jqzoom是放大镜的类名,是必须的-->
            <img src="/file/upload/201901/14/100512617.jpg" id="BigImg" alt=""/>
        </div>

css代码

以下是jq放大镜必须的css样式，可以自定义修改。

.jqzoom{position: relative;padding:0px;cursor:pointer;margin:0px;display:block;overflow: hidden;}
.zoomdiv{z-index:100;position:absolute;top:0px;left:0px;width:350px;height:350px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
.jqZoomPup{z-index:10;visibility:hidden;position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #aaa;background:#ffffff;opacity: 0.5;-moz-opacity: 0.5;-khtml-opacity: 0.5;filter: alpha(Opacity=50);}
.jqzoom>img{width: inherit;height: inherit;}

js代码

通过 $(".jqzoom").jqueryzoom调用内置参数。

		<script src="/js/jquery-1.10.2.min.js"></script> //jquery库是必须要引入的
        <script src="/js/jquery.jqzoom.js"></script> //src是路径，如果不同需要按个人路径自行修改
        <script>
            $(document).ready(function(){
               $(".jqzoom").jqueryzoom({xzoom:400,yzoom:300}); // xzoom和yzoom代表试图区域的宽和高
            });
        </script>

注：放大镜大小由图片大小决定，图片过小则不会有鼠标移动效果。
xzoom和yzoom分别表示放大镜试图的宽和高。正常情况，调用这两个参数足矣。
js路径是我本地的路径，直接复制代码，路径还需修改为个人的本地路径。

放大镜效果图

在网上随便找的图片随便处理了下水印，有点丑，请大家见谅。

左边是原图，右边是放大镜试图效果。

插件地址

放大镜插件：https://download.csdn.net/download/qq_43211876/10937252