EasyZoom实用的jquery图片放大插件

当前位置:主页 > jQuery库 > 图片效果 > EasyZoom实用的jquery图片放大插件
EasyZoom实用的jquery图片放大插件
分享:

    插件介绍

    EasyZoom使用看很实用的jquery图片放大插件。这款jquery图片放大插件可以在单幅图片内局部放大图片,也可以生成另一张放大的预览图。EasyZoom十分小巧实用。

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-24
    阅读:

简要教程

EasyZoom是一款优秀的jQuery图片放大插件。EasyZoom支持触摸设备,并且可以很容易的调整它的css样式。

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 plugin
var $easyzoom = $('.easyzoom').easyZoom();

// Get the instance API
var 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.                
                
贵州快3

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!