jQuery图片放大镜插件 - elevateZoom

本文参考:http://site518.net/jquery-image-zooming-plugin-with-gallery-elevatezoom/

我们之前曾经推荐过几个放大镜类的插件,今天再给大家推荐一个内置了相册展示效果的jQuery 放大镜插件 - elevateZoom

jQuery图片放大镜插件 - elevateZoom

elevateZoom 是一个定制性非常高的 jQuery 放大镜插件,可实现类似淘宝中的查看大图效果。它能够对一张图片或两张图片(一张缩略图和一张大图)实现放大效果。放大图片的位置可自定义设置,并且支持内缩放,使用放大镜镜头展示大图。它还内置了一个相册展示的模式,可同时展示多张可缩放的图片。它自带了淡入淡出、easing 等多种效果。

如何使用

首先在页面中加入 jQuery 框架和 elevateZoom 插件

<script src="jquery.latest.js"></script>
<script src="elevatezoom.js"></script>

然后添加需要放大显示的图片,data-zoom-image 属性设置的是大图路径

<img id="zoom_demo" src='small.png' data-zoom-image="large.jpg"/>

最基本的初始化方法如下

$('#zoom_demo').elevateZoom(

相关推荐