jquery.zoom.js的一点使用心得（仿京东放大镜）

　　在做一个商城网站，类似淘宝京东这类商品展示放大的效果肯定要有。在下载了多款插件使用中，jquery.zoom.js给我的体验算是最佳的了。



　　上图是模仿京东的弹出一个容器展示放大效果，选图不要在意，在下京吹一枚。　　
jquery.zoom.js使用十分方便，这里介绍其中一种使用方法（因为已经一点了），使用页面上已经存在的元素。

html代码：

<script src="js/jquery.js"></script>
<script src="js/jquery.zoom.min.js"></script>

引入jquery和jquery.zoom

<div id="zoom" class="zoom">
<img src="tamako.jpg"/>
</div>
<div id="target"></div>

css代码：

.zoom{
display: inline-block;
}
img{
width: 300px;
height: 300px;
}
#target{
position: absolute;
left: 300px;
top: 0;
height: 500px;
width: 500px;
border: 1px solid #666;

visibility: hidden;
}

JS代码：

$('#zoom').zoom({
target: '#target',
onZoomIn: function(){
$('#target').css('visibility', 'visible');
},
onZoomOut: function(){
$('#target').css('visibility', 'hidden');
}
});

首先，创建一个盛放小图片的容器，里面包含一张图片，设置好它们的大小，另外创建一个盛放放大后图片的容器，通过绝对定位置于原图右侧，默认状态为不可见。

然后，在JS代码中选中图片的容器，调用封装好的zoom()方法，并向其中传入参数。其中target表示放大后效果展示的容器，可以自行选择任意元素（不能是容器的父级元素），不填则默认以自身为容器。

最后，onZoomIn是当鼠标移入放大图片时执行的代码，这里的作用是将之前被隐藏的元素显示出来，因为我有设置一个默认的边框样式需要隐藏，onZoomOut正好与之对应，当鼠标离开的时候将容器隐藏起来。一个简单的放大镜效果就完成了。当然，还有其他参数，我一一说一下：

url：如果有准备两张图，一大一小，则这里放置大图的路径，之前放置小图的路径（我的例子中只有一张图）;

on：设置放大的触发条件，有mouseover（默认，当鼠标进入时触发）、grab（当鼠标按下时触发，类似于mousedown）、click（鼠标点击时触发）、toggle（当鼠标点击时放大当前点击的范围，不可移动）；

duration：设置淡入淡出时间，但是我试了好多种方法，只能设置淡出时间，淡入没法设置，求高人指点；

target：设置放大后的图片的容器，不能是父级元素；

touch：设置能否在放大时进行移动放大，toggle类似；

magnify：设置放大的倍数，默认值为1，就是放大2倍；

callback：设置回调函数，自由发挥；

onZoomIn：放大时回调函数，我的例子中用于显示容器；

onZoomOut：缩小时的回调函数，我让容器隐藏起来。

注：为什么使用visibility而不是使用display的原因是display在使用ctrl+r重载页面时会引发一个小bug，然后笔者当时急着改bug没深入探究，但是之后想重现bug却发现找不到这个bug了。若是诸位使用display没问题的话也不用过分纠结于此~。

说了这么多废话，希望自己能有所收获，也希望能帮助到人。