轻量级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时有效)
});

下载　演示