注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery图片放大镜插件EasyZoom

媒体 fishcity 1386浏览

jQuery图片放大镜插件EasyZoom

EasyZoom是一个优雅,高度优化的jQuery插件,它可实现放大镜功能和基于源图平移放大的地图移动效果,easyzoom还支持触摸功能的设备,并且非常容易自定义CSS样式。

使用方法

引入核心文件

<link rel="stylesheet" href="css/easyzoom.css" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="dist/easyzoom.js"></script>

构建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;
}

写入JS初始化插件

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

转载请注明:jQ酷 » jQuery图片放大镜插件EasyZoom

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。