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="data: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="data:images/look.gif" alt="点击看大图" />
         </a>
     </span>
12 </div>

4、效果图为：