elevateZoom 是一个定制性很是高的 jQuery 放大镜插件，可实现电子商务网站中查看大图的效果。它可以对一张图片或两张图片(一张缩略图和一张大图)实现放大效果。放大图片的位置可自定义设置，而且支持内缩放，使用放大镜镜头展现大图。

首先咱们看下6种不一样放大镜HTML结果：

<h1>默认效果</h1> 
    <img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> 
    <h1>内置镜头</h1> 
    <img id="zoom_02" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> 
    <h1>镜头聚焦</h1> 
    <img id="zoom_03" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> 
    <h1>淡入/淡出设置</h1> 
    <img id="zoom_04" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> 
    <h1>动画</h1> 
    <img id="zoom_05" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> 
    <h1>鼠标滚动</h1> 
    <img id="zoom_06" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" />

6中不一样的放大镜效果代码都很简单，代码都已翻译注释：

$('#zoom_01').elevateZoom({});//默认效果 
     
    $('#zoom_02').elevateZoom({ //内置镜头 
        zoomType: "inner",//类型：内置镜头 
        cursor: "crosshair", //光标：十字 
        zoomWindowFadeIn: 500,//镜头窗口淡入速度 
        zoomWindowFadeOut: 750 //镜头窗口淡出速度 
    }); 
     
    $("#zoom_03").elevateZoom({ //镜头聚焦 
        zoomType: "lens",//类型：透镜效果 
        lensShape: "round", //透镜形状：圆形 
        lensSize: 200 //透镜尺寸：长和宽：200px 
    }); 
     
    $("#zoom_04").elevateZoom({ //淡入/淡出设置 
        zoomWindowFadeIn: 500,//镜头窗口淡入速度 
        zoomWindowFadeOut: 500,//镜头窗口淡出速度 
        lensFadeIn: 500,//透镜淡入速度 
        lensFadeOut: 500//透镜淡出速度 
    }); 
     
    $("#zoom_05").elevateZoom({ //动画 
        easing: true //是否开启动画效果 
    }); 
     
    $("#zoom_06").elevateZoom({ //鼠标滚动 
        scrollZoom: true //是否开启鼠标滚动 
    });

效果演示：http://www.sucaihuo.com/jquery/1/127/demo/