图片/图形
简单实用图片放大镜jQuery特效
PetitQ
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 名称
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
