图片/图形
EasyZoom实用图片放大jQuery插件
PetitQ
EasyZoom 使用看很实用的 jquery 图片放大插件。这款 jquery 图片放大插件可以在单幅图片内局部放大图片，也可以生成另一张放大的预览图。EasyZoom 十分小巧实用。
HTML 结构
EasyZoom 不需要特别的 html 结构，只需要一个 div，给它一个 class easyzoom。然后在 div 中放置一个 a 元素用来指向大图，a 中放置小图。
也想出现在这里？联系我们吧
<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
EasyZoom 通过 jQuery 来实例化对象，还可以通过元素数据访问对象实例的 API。EasyZoom 也兼容 AMD 和 CommonJS。
// Instantiate EasyZoom pluginvar $easyzoom = $('.easyzoom').easyZoom();
// Get the instance APIvar api = $easyzoom.data('easyZoom');
可用参数
loadingNotice
加载图片时的提示文字。 Default: "Loading image".
errorNotice
加载出错的提示文字。 Default: "The image could not be loaded".
preventClicks
阻止在图片上的点击事件。 Default: true.
onShow
Callback function to execute when the flyout is displayed. Default: undefined
onHide
Callback function to execute when the flyout is removed. Default: undefined
API
.show([MouseEvent|TouchEvent])
Displays the zoom image flyout. Optionally takes an instance of a mouse or touch event.
.hide()
Removes the zoom image flyout..teardown()
Removes all events and elements created and attached by EasyZoom.
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
