08/18
2015
详情在内~
今天需要做个图片放大镜的效果，先是百度到了一个使用jqzoom的例子（点击查看）：
这个是仿淘宝的，然而我这里是证书展示，结构有些不同：
我没有先把大图展示出来这个结构，而是鼠标经过图片直接放大。这是第一次用jqzoom，慢慢摸索着改出来了。
以下是代码+解释：
1.引入所需的js文件：
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script> <script src="jquery.imagezoom.min.js"></script>
2.html结构：
<ul id="thumblist" class="clearfix"> <li><img src="imgurl" rel="bigimgurl" class="jqzoom" alt=""></li> <li><img src="imgurl" rel="bigimgurl" class="jqzoom" alt=""></li> </ul>
rel属性指示大图的url；
jqzoom是缩略图需要加的class，也可以改成别的，或者不使用class，只要下面绑定事件时的选择器正确就行；
偷懒的话小图和大图使用同一张图（即不单独做小图）也可以。
3.在html结构之后（或使用jq的ready方法），添加事件处理：
<script type="text/javascript">
$(".jqzoom").imagezoom();
</script>
选择器需要选中要展示的每张图片。
4.css：
<style>
li{list-style: none;}
.clearfix:after{content:".";display:block;height:0; clear:both; visibility:hidden;}
#thumblist{width: 299px;;background: #eee;padding: 7px 5px;}
#thumblist li{float: left;margin:6px;width: 133px;height: 120px;}
#thumblist li img{width: 133px;max-height: 100%;}
/*下面两行是jqzoom所需的*/
div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url("mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
</style>
注释之前的css根据自己需要的改吧。
注意把mask.png这张图片的路径改成自己的。
有时候鼠标放上去没有显示大图，是因为这时候事件的处理出了问题：
原本鼠标经过了小图的时候，会创建一个div，里面包含大图。然后需要获取大图的宽高等属性。
可是鼠标移动速度过快，导致两个小图之间切换时间非常短的时候，偶尔会导致第二张图上没有发生该有的事件（创建div），所以获取属性失败，也根本不会显示大图。
增加小图之间的间距可能有助于减少此类现象。
像仿淘宝的那种，因为不会涉及到多个小图之间的鼠标经过事件，所以没有这个问题。
