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/