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

时间：2023-03-09 22:25:33
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、效果图为：

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

相关文章