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名称。