jQuery图片缩放插件EasyZoom

 查看演示  website  立即下载

使用方法

html

EasyZoom不依赖于特定的标记结构但重要的是EasyZoom目标元素 (<div class="easyzoom">)只包含一个链接到大图和较小的图像。其他元素目标必须不影响其布局,如绝对定位的元素。

<div class="easyzoom">
    <a href="images/zoom.jpg">
        <img src="images/standard.jpg" alt="" />
    </a>
</div>

CSS

/* Shrink wrap strategy 1 */
.easyzoom {
    float: left;
}
.easyzoom img {
    display: block;
}
/* Shrink wrap strategy 2 */
.easyzoom {
    display: inline-block;
}
.easyzoom img {
    vertical-align: bottom;
}

JavaScript

// Instantiate EasyZoom plugin
var $easyzoom = $('.easyzoom').easyZoom();
// Get the instance API
var api = $easyzoom.data('easyZoom');

PREVIOUS:
NEXT:
jQuery滚动菜单插件Section Menu
jQuery标签插件flyLabel.js