jqzoom插件制作仿京东商品详情页面图片特效

一、效果图

　　jqzoom插件用于产生图片放大镜效果，效果图如下：

      

二、引入

　　项目GitHub地址：https://github.com/mindprojects/jqzoom

　　1、引入 jQuery

1	<script src="本地目录或cdn地址/jquery.js" type="text/javascript"></script>

　　2、引入 jqzoom插件

1	<script src="路径/jquery.jqzoom.js" type="text/javascript"></script>

 三、配置

　　1、html 文档结构

　　例：

1 <div class="jqzoom">
2     <a href="images/pro_img/blue_one_big.jpg" class="jqzoom" title="免烫高支棉条纹衬衣">
3         <img src="images/pro_img/blue_one_small.jpg" alt="">
4     </a>
5 </div>    

　　2、script 脚本配置

 1 $(function(){
 2     $('.jqzoom').jqzoom({
 3         //（默认值）standard / reverse,原图用半透明图层遮盖
 4         zoomType: 'reverse', 
 5         //是否在原图上显示镜头
 6         lens:true,
 7         // 预先加载大图片
 8         preloadImages: false,
 9         //放大镜是否总是显示存在
10         alwaysOn:false,
11         //放大窗口的尺寸
12         zoomWidth: 340,
13         zoomHeight: 340,
14         //放大窗口相对于原图的偏移量、位置
15         xOffset:10,
16         yOffset:0,
17         position:'right',
18         //默认值：true，是否显示加载提示Loading zoom
19         showPreload:true,
20         //默认 Loading zoom，自定义加载提示文本
21         preloadText: '加载中……'
22         //imageOpacity 默认值 0.2 透明度
23         //title 是否在放大窗口中显示标题，值可以为a标记的title值，若无，则为原图的title值
24     });
25 });

　　3、css 样式配置

  1 // jqzoom css 源码
  2 .zoomPad{
  3         position:relative;
  4         float:left;
  5         z-index:99;
  6         cursor:crosshair;
  7 }
  8  
  9  
 10 .zoomPreload{
 11    -moz-opacity:0.8;
 12    opacity: 0.8;
 13    filter: alpha(opacity = 80);
 14    color: #333;
 15    font-size: 12px;
 16    font-family: Tahoma;
 17    text-decoration: none;
 18    border: 1px solid #CCC;
 19    background-color: white;
 20    padding: 8px;
 21    text-align:center;
 22    background-image: url(../images/zoomloader.gif);
 23    background-repeat: no-repeat;
 24    background-position: 43px 30px;
 25    z-index:110;
 26    90px;
 27    height:43px;
 28    position:absolute;
 29    top:0px;
 30    left:0px;
 31     * 100px;
 32     * height:49px;
 33 }
 34  
 35  
 36 .zoomPup{
 37         overflow:hidden;
 38         background-color: #FFF;
 39         -moz-opacity:0.6;
 40         opacity: 0.6;
 41         filter: alpha(opacity = 60);
 42         z-index:120;
 43         position:absolute;
 44         border:1px solid #CCC;
 45   z-index:101;
 46   cursor:crosshair;
 47 }
 48  
 49 .zoomOverlay{
 50         position:absolute;
 51         left:0px;
 52         top:0px;
 53         background:#FFF;
 54         /*opacity:0.5;*/
 55         z-index:5000;
 56         100%;
 57         height:100%;
 58         display:none;
 59   z-index:101;
 60 }
 61  
 62 .zoomWindow{
 63         position:absolute;
 64         left:435px;
 65         top:40px;
 66         background:#FFF;
 67         z-index:6000;
 68         height:auto;
 69    z-index:10000;
 70    z-index:110;
 71  
 72 }
 73 .zoomWrapper{
 74         position:relative;
 75         border:1px solid #999;
 76   z-index:110;
 77 }
 78 .zoomWrapperTitle{
 79         display:block;
 80         background:#999;
 81         color:#FFF;
 82         height:18px;
 83         line-height:18px;
 84         100%;
 85   overflow:hidden;
 86         text-align:center;
 87         font-size:10px;
 88   position:absolute;
 89   top:0px;
 90   left:0px;
 91   z-index:120;
 92   -moz-opacity:0.6;
 93   opacity: 0.6;
 94   filter: alpha(opacity = 60);
 95 }
 96 .zoomWrapperImage{
 97         display:block;
 98   position:relative;
 99   overflow:hidden;
100   z-index:110;
101  
102 }
103 .zoomWrapperImage img{
104   border:0px;
105   display:block;
106   position:absolute;
107   z-index:101;
108 }
109  
110 .zoomIframe{
111   z-index: -1;
112   filter:alpha(opacity=0);
113   -moz-opacity: 0.80;
114   opacity: 0.80;
115   position:absolute;
116   display:block;
117 }
118  
119 /*********************************************************
120 / 点击原图会在选中的锚点上添加 "zoomThumbActive" 类
121 /*********************************************************/

 四、关于jqzoom图片的动态刷新

　　　　

　　上图的例子中，点击略缩图，大图更换图片，需要实现右侧 jqzoom大图也同步更换。锋利的jQuery 书中的方法：　　　　

// 纯 HTML实现，使用自定义 rel 属性
// 大图部分
<div class="jqzoomWrap">
    <a href="images/pro_img/blue_one_big.jpg" class="jqzoom" rel='gal1' title="免烫高支棉条纹衬衣" >
        <img src="images/pro_img/blue_one_small.jpg" title="免烫高支棉条纹衬衣" alt="免烫高支棉条纹衬衣" id="bigImg" />
    </a>
</div>

// 略缩图部分
<ul class="imgList">
    <li class="imgList_blue">
        <a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_one_small.jpg',largeimage: 'images/pro_img/blue_one_big.jpg'}">
            <img src='images/pro_img/blue_one.jpg' alt=""/>
        </a>
    </li>
     // 省略 li ……
</ul>

　　① 大图 jqzoom 类的 <a>标签 添加属性 rel=‘gal1’，用作标识（“文中称 ‘钩子’ ”）；

　　② 略缩图 <a> 标签的 rel属性设置为：

{ gallery: 'gal1',                                  // 目标指向 gal1
   smallimage: 'images/pro_img/blue_one_small.jpg', // 大图路径
   largeimage: 'images/pro_img/blue_one_big.jpg'    // jqzoom大图路径
}