分享購物網站中經常使用的一款放大鏡效果(產品細節展現)

發現程序猿寫博客前都喜歡吐槽一下，也難怪，平時交流少了，心裏積累了很多的騷氣，是應該適當發泄一下。

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

公司目前作前端的就只有兩個鳥人，而我就是其中一個，因此任務也挺多的。這也卻是其次，最主要的是在別人留下的爛攤子攪合，真有點心力交瘁。欣慰的是，在這大半年確實進步了很多，代碼質量提升很多。

 

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

 

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

查看效果 源碼下載

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

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

 

功能很少，卻花了我一天的時間，由於要作成插件，多考慮了一些兼容狀況及優化了一下代碼。在這過程當中，如下幾個點是花了很多時間思考的：

一、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

二、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

蜂衆網,廣州蜂衆網,垂直居中,兼容瀏覽器