简单实用的jQuery图片放大镜插件

ClassyLoupe是一款简单实用的jQuery图片放大镜插件。该放大镜插件只需一行HTML代码。它可以控制图片的放大倍数，可以制作圆形，方形和圆角矩形的放大镜，并带有非常好看的遮罩层效果。

使用方法

使用该放大镜插件需要引入jQuery，jquery.mousewheel.js和jquery.easing.1.2.js文件，以及插件本身的jquery.classyloupe.min.js和jquery.classyloupe.min.css文件。

<link rel="stylesheet" type="text/css" href="css/jquery.classyloupe.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.easing.1.2.js"></script>
<script src="js/jquery.classyloupe.min.js"></script>              
              

HTML结构

该图片放大镜插件的HTML结构如下：

<a href="#">
    <img alt="Your image caption" src="your-image.jpg" class="louped" />
</a>                
              

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该图片放大镜插件。

$('.louped').ClassyLoupe({
    maxSize: 600,
    loupeToggleSpeed: 'fast'
});               
              

配置参数

• shape：放大镜的形状，可选值有：circle, rounded 或 square，默认是circle。
• glossy：放大镜是否有光泽特效，默认值为true。
• shadow：放大镜是否带有drop-shadow效果，默认值为true。
• trigger：触发放大镜效果的鼠标事件，默认值为mouseenter。
• roundedCorners：放大镜的圆角大小（如果是矩形），默认值为10。
• size：放大镜的尺寸，宽度和高度，默认值为200。
• minSize：放大镜的最小尺寸，默认值为150。
• maxSize：放大镜的最大尺寸，默认值为250。
• resize：是否可以改变大小，默认值为true。
• sizeSnap：默认值为10。
• canZoom：是否可以放大，默认值为true。
• zoom：放大倍数，默认值为100。
• minZoom：最小放大倍数，默认值为50。
• maxZoom：最大放大倍数，默认值为200。
• zoomSnap：默认值为5。
• overlay：是否显示遮罩层，默认值为true。
• overlayOpacity：遮罩层的透明度，默认值为0.5。
• overlayClassName：遮罩层的class名称。