轻量级jQuery图片放大镜插件 - mlens

今天推荐一个相当轻量级的图片放大镜插件mlens。




　　mlens 是一个简单易用的轻量级jQuery 图片放大镜插件，仅有3kb大小。使用此插件你可设置放大镜类型为圆形或矩形，放大镜的大小及边框等都可以设置，当你使用矩形时还可以设置圆角边框效果。在同一页面中可初始化多个实例，另外，此插件的 WordPress
版本也在开发中。

如何使用

　　1 首先在页面的 head 中引入
jQuery 框架和mlens 插件

<script src="jquery.min.js"></script>

<script src="jquery.mlens-1.0.min.js"></script>
　　2 接下来要做的就是准备一大一小两张图片，按以下方式设置

<img id="demoimg" src="img640px.jpg" data-big="img1280px.jpg" />
　 3　最后像这样初始化

$("#green_monster").mlens(

{

imgSrc: $("#demoimg").attr("data-big"), //大图路径

lensShape: "square", // 放大镜类型 (circle or square)

lensSize: 160,

borderSize: 3,

borderColor: "#ccc",

borderRadius: 10 // 圆角(类型为square时有效)

});
下载　演示