【IT168 技术】喜欢在京东商城上购物的朋友们，如何快速淘到自己想要的商品呢?相信大多数人还是喜欢看图淘宝吧!京东商城产品展示页支持多图切换并放大代码，放大功能的核心代码为jQzoom，当把鼠标移到下边的小图上的时候，上边显示大图片，当把鼠标放到大图片上，右侧则出现鼠标对应地方的大图片，方便查看产品细节，比较适合网店产品展示。

　　JQZoom 是一个JavaScript图像放大镜，内置在流行的jQuery JavaScript框架顶部。jQzoom 功能非常强大，操作较为简单。支持标准模式、反转模式、无镜头、无标题的放大，并可以自定义jQZoom的窗口位置和渐隐效果，修正IE6的select bug。

       我们先来看看具体的Demo效果演示：

• Standard zoom with thumbnails

• Reverse zoom

• Drag zoom

   

  $(document).ready(function(){
                              $('a#demo3').jqzoom({
                                                      zoomType: 'drag'
                                                  });
                      });

   

• Inner zooom
•  
• 01.$(document).ready(function(){  
  02.           $('a#demo4').jqzoom({  
  03.                                zoomType: 'innerzoom'  
  04.                            });  
  05.});
  

• Always on zoom

   

  01.$(document).ready(function(){  
  02.            $('a#demo5').jqzoom({  
  03.                                    zoomType: 'standard',  
  04.                                    alwaysOn : true  
  05.                            });  
  06.  
  07.});
  

   

• Resize,zoom popup custom position, fadein, fadeout effects
  01.$(document).ready(function(){  
  02.     $('a#demo6').jqzoom({  
  03.            zoomType: 'standard',  
  04.            alwaysOn : false,  
  05.            zoomWidth: 250,  
  06.            zoomHeight:200,  
  07.            position:'left',  
  08.            xOffset: 30,  
  09.            yOffset:80,  
  10.            showEffect : 'fadein',  
  11.            hideEffect: 'fadeout'  
  12.        });  
  13.  });
  

　　以上Demo演示：http://www.mind-projects.it/projects/jqzoom/demos.php#demo1