技术开发 频道

京东商城好帮手:jQuery 图像放大插件

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

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

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

  •  

 

01.$(document).ready(function(){
02. $('a#demo1').jqzoom();
03.});

 

01.$(document).ready(function(){
02. $('a#demo2').jqzoom({
03. zoomType: 'reverse'
04. });
05.});
  • 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

  

0
相关文章