jquery图片放大镜和遮罩层效果

图片放大镜效果将借助于jqzoom插件，遮罩层借助于thickbox插件。

1、引入样式表

/*整体样式*/
<link rel="stylesheet" href="styles/main1.css" type="text/css" />
/*图片遮罩层样式*/
<link rel="stylesheet" href="styles/thickbox.css" type="text/css" />

2、引入js插件

<!-- jquery文件-->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<!-- 图片放大镜 -->
<script src="scripts/jquery.jqzoom.js" type="text/javascript"></script>
<script src="scripts/use_jqzoom.js" type="text/javascript"></script>
<!-- 遮罩图片 -->
<script src="scripts/jquery.thickbox.js" type="text/javascript"></script>

3、具体页面内容

<div class="jnProitem">
　　<div class="jqzoomWrap">
　　　　<a href="images/pro_img/blue_one_big.jpg" class="jqzoom" rel='gal1' title="衬衣" >
 4　　　　　　 <img src="images/pro_img/blue_one_small.jpg" title="纹衬衣" alt="衬衣"/>
       </a>
    </div>
    <span>
        <a title="介绍文字" href="images/pro_img/blue_one_big.jpg" class="thickbox">
           <img src="images/look.gif" alt="点击看大图" />
        </a>
    </span>
12 </div>

4、效果图为：