JQuery.zoom.js和JQuery.thickbox.j

关于JQuery.zoom.js插件是用来图片放大的轻量级插件

下载以及Dmemo
http://www.jqueryscript.net/zoom/Simple-Image-Inner-Zoom-Plugin-jQuery-Zoom.html
参考书 锋利的Jquery由于是前几年的书，所以并不完全适用最新的JQuery.zoom.js

本人做网站的时候用的
JQuery 1.9
Zoom 1.7.14

使用是先引入

<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery.zoom.min.js"></script>
<script src="scripts/use_jqzoom.js"></script>

user_jqzoom为自己新建的js文件

html 结构

<div id="bigImg">    
    <span class='zoom' id='ex1'>        
      <img src="images/1_bigger.jpg" alt="预览大图"  class="zoom" id="big"/>    
  </span>
</div>

user_jqzoom.js

$(document).ready(function(){
  $('#ex1').zoom();
});

这样就可以了，超级简单有木有~ 不得不说插件非常强大。
这种效果是 鼠标 hover后图片放大，当然还有各种各样的方式，可以参考官方的demo

JQuery.thickbox.js

JQuery.thickbox.js是用来产生遮罩层的插件，在显示高清大图的时候非常好用，具体效果如下：

xiaoguo.jpg

下载已经Demo地址
http://codylindley.com/thickbox/

1 引入css与js文件

<link rel="stylesheet" href="tool/jquery-thickbox-master/thickbox.css" />
<script src="tool/jquery-thickbox-master/thickbox.js"></script>

2 html结构

<div id="hdpic">
  <a href="images/1_bigger.jpg" class="thickbox" title="绫波丽">
    <img src="images/1_bigger.jpg" style="display: none"/>
    <p style="text-align: center">查看高清大图</p>
  </a>
</div>    

其中a标签中的href为你所要放大的图片， title添加的图片描述会被显示与图片下方

3修改thiickbox.js

由于thickbox不兼容jquery1.9，所以要做一下小的修改
在thickbox.js 的284行改成

if ('undefined' == typeof(document.body.style.maxHeight))

主要是ie6的兼容性判定