jQuery图片放大镜插件 - ClassyLoupe-插件特效-ICode联盟

ClassyLoupe是一款简单实用的jQuery图片放大镜插件。该放大镜插件只需一行HTML代码。它可以控制图片的放大倍数，可以制作圆形，方形和圆角矩形的放大镜，并带有非常好看的遮罩层效果。使用该放大镜插件需要引入jQuery，jquery.mousewheel.js和jquery.easing.1.2.js文件，以及插件本身的jquery.classyloupe.min.js和jquery.classyloupe.min.css文件。该图片放大镜插件的HTML结构如下：在页面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名称。