分享購物網站中常用的一款放大鏡效果(産品細節展示)

發現程式猿寫部落格前都喜歡吐槽一下，也難怪，平時交流少了，内心積累了不少的騷氣，是應該适當發洩一下。

哥要發洩了：目前在廣州蜂衆網效力，這是一家剛創立不久的公司，哥喜歡接觸一些新公司，活力充足，發展機會也大。當然有機會去一些知名的大公司（騰訊，百度等），也是非常向往的，這樣的鍍金公司進去走一趟也學到不少東西。

公司目前做前端的就隻有兩個鳥人，而我就是其中一個，是以任務也挺多的。這也倒是其次，最主要的是在别人留下的爛攤子攪合，真有點心力交瘁。欣慰的是，在這大半年确實進步了不少，代碼品質提高不少。

===============================================吐槽完畢分割線===================================================

今天要分享的是購物網站中常用的一款放大鏡效果，效果圖如下：

檢視效果 源碼下載下傳

其實這些插件網上也很多，不過畢竟是自己做的插件，拿出來顯擺顯擺一下而已，這也是我繼續從事IT事業的動力之一。

插件名：	jQuery.imgzoom
相容情況：	IE6+ chrome Firefox (公司已放棄IE，這是一個明智的決定)
參數說明：	var opts = { lensAuto: true, // 鏡頭高寬比例跟圖檔一緻 lensWidth: 120, // 鏡頭寬 lensHeight: 120, // 鏡頭高 scale: 4, // 放大幾倍 loading: 'images/loading.gif' // 大圖loading圖 } $('...').imgzoom(opts);
功能說明：	1、圖檔寬高自适應 2、設定lensAuto參數，可使鏡頭和放大圖的高寬比例與圖檔一緻 3、對不符合要求放大圖檔的一些完善處理（如大圖跟展示圖一樣大等情況）

功能不多，卻花了我一天的時間，因為要做成插件，多考慮了一些相容情況及優化了一下代碼。在這過程中，以下幾個點是花了不少時間思考的：

1、css：圖檔垂直居中，自己之前總結了網上的幾種方案，卻漏了最簡單的那種(行高等于容器高度)，項目中的代碼如下：

div.sg_pbox{width:328px;height:328px;text-align: center;line-height: 328px;font-size: 0;}
div.sg_pbox img{max-width: 328px;max-height: 328px;vertical-align: middle;}      

因為IE6不了解max-width,max-height，是以主要是這裡不相容IE6

2、JS：計算鏡頭和大圖的移動，以及鏡頭和大圖寬高比例與展示圖一緻，自問高中數學不錯，沒想到在這糾結了。

calculate = function(dImg){ /*相關參數的計算*/
    var $img = $(dImg);
    imgL = $img.offset().left;
    imgT = $img.offset().top;
    imgW = dImg.offsetWidth;
    imgH = dImg.offsetHeight;

    if(lensAuto){
        if(imgW > imgH)    {
            lensW = opts.lensWidth;
            lensH = Math.ceil(imgH * lensW / imgW);
        }else{
            lensH = opts.lensHeight;
            lensW = Math.ceil(imgW * lensH / imgH);
        }    
    }

    viewerW = lensW * scale;
    viewerH = lensH * scale;
    maxW = imgW - lensW;
    maxH = imgH - lensH;
    halfW = lensW / 2;
    halfH = lensH / 2;
};      

插件不難，但涉及的一些js基礎知識還是挺多的，非常适合新手練習。

文章正文已結束，感謝閱讀。如果本文對您有所幫助，請點選推薦一下。

如果對本文有何建議或疑問請留言或加群讨論，前端開發交流群(75701468)

文章屬于原創，如需轉載請注明文章來源，不勝感激。

文章位址：http://www.cnblogs.com/leolai/p/3544307.html

蜂衆網,廣州蜂衆網,垂直居中,相容浏覽器