發現程序猿寫博客前都喜歡吐槽一下，也難怪，平時交流少了，內心積累了不少的騷氣，是應該適當發泄一下。
哥要發泄了：目前在廣州蜂眾網效力，這是一家剛創立不久的公司，哥喜歡接觸一些新公司，活力充足，發展機會也大。當然有機會去一些知名的大公司（騰訊，百度等），也是非常向往的，這樣的鍍金公司進去走一趟也學到不少東西。
公司目前做前端的就只有兩個鳥人，而我就是其中一個，所以任務也挺多的。這也倒是其次，最主要的是在別人留下的爛攤子攪合，真有點心力交瘁。欣慰的是，在這大半年確實進步了不少，代碼質量提高不少。
===============================================吐槽完畢分割線===================================================
今天要分享的是購物網站中常用的一款放大鏡效果，效果圖如下：
其實這些插件網上也很多，不過畢竟是自己做的插件，拿出來顯擺顯擺一下而已，這也是我繼續從事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