必优博客

实现一个图片放大镜的效果，可应用于商品图片页等对图片细节要求高的地方，使用jQuery插件magnifier可以简单的实现一个图片放大镜的功能，效果图如下：

使用说明
需要使用jQuery库文件和magnifier库文件

必优推荐级别：★★★
使用实例
一，包含文件部分

1. <script src="jquery.min.js" type="text/javascript"></script>
2. <script src="jquery.magnifier.0.5.js" type="text/javascript"></script>

二，HTML部分

1. <img src="images/macro_rik_min.jpg" fullsize="images/macro_rik_big.jpg" />

其中fullsize表示大图片的地址

三，Javascript部分

1. $("img[fullsize]").magnifier({
2. position: "top-right",
3. fullSizeX: "950px"
4. });

如上实例，使用jQuery插件magnifier就能非常简单的实现一个图片放大镜的效果。