前言

創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站建設(shè)、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元婁底做網(wǎng)站,已為上家服務(wù),為婁底各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

因為一些特殊的業(yè)務(wù)需求，經(jīng)過一個多月的蟄伏及思考，我開發(fā)了這款 jQuery 圖片查看器插件 Magnify，它實現(xiàn)了 Windows 照片查看器的所有功能，比如模態(tài)窗的拖拽、調(diào)整大小、最大化，圖片的縮放、旋轉(zhuǎn)，平移、鍵盤控制等。插件的樣式都是最基礎(chǔ)的 CSS，定制非常容易，可以輕松修改成自己喜歡的樣式。隨后會陸續(xù)發(fā)布 React 及 Vue 相關(guān)版本的插件。本文主要介紹插件的特點及使用方法，而關(guān)于插件開發(fā)的細(xì)節(jié)將會在之后的具體文章中說明。

Github: https://github.com/nzbin/magnify

Website:  https://nzbin.github.io/magnify

開發(fā)小記

由于最近工作繁忙，幾乎每天都是晚上十點到家，然后開始編寫插件，睡覺時已過凌晨，如今身心俱疲。因為沒有找到相關(guān)的插件，所以很多問題都是絞盡腦汁獨立思考，比如以鼠標(biāo)為中心縮放圖片、改變彈窗大小時對圖片移動的限制、圖片旋轉(zhuǎn)之后的縮放、平移等問題，而開發(fā)插件最讓人頭疼的就是細(xì)節(jié)，甚至大部分時間是在修復(fù)單一功能的 bug 。

另外，開發(fā)插件的最大難度不是功能實現(xiàn)，而是如何設(shè)計插件，如何讓插件的使用更簡單、更方便。關(guān)于如何設(shè)計插件并不是本篇文章的重點，我會在之后專門寫一篇介紹插件設(shè)計思想的文章。

插件所有的代碼幾乎都是在調(diào)整彈窗或者圖片的 width、height、left、top ，所以兼容性問題不大，主要是 2D 旋轉(zhuǎn)問題，IE 9 以下需要使用濾鏡實現(xiàn)。為了方便調(diào)整樣式，其中有很多相對位置的計算。

Magnify 采用了文件分離的方式編寫，使用 npm 插件打包，并沒有使用新語法，也沒有使用現(xiàn)在流行的打包工具。使用 npm 工具已經(jīng)是項目開發(fā)打包發(fā)布的一個趨勢。

演示

如果你不想點開網(wǎng)址查看示例的話，可以通過下面的 CodePen 查看插件效果，除了視窗的大小之外，兩種方式?jīng)]有任何區(qū)別：

如果你的網(wǎng)速和其他原因不能打開 CodePen 的話，可以查看下面的圖片演示。

主要功能

Magnify 的功能可以參考 Windows 照片查看器，基本完成了可以實現(xiàn)的所有功能。

1.模態(tài)窗拖拽

如果圖片尺寸不大于展示區(qū)域，通過圖片展示區(qū)域也可以拖拽彈窗。這和 QQ 圖片查看器的操作方式是相同的。

2.模態(tài)窗調(diào)整大小

目前的調(diào)整大小存在一點 bug，但不影響整體的使用。

3.模態(tài)窗最大化

除了彈窗最大化，開發(fā)初期也設(shè)計了最小化的功能，但感覺有些雞肋，所以暫時沒有添加。

4.圖片縮放

可以通過鼠標(biāo)滾輪、按鈕、鍵盤等操作

5.圖片旋轉(zhuǎn)

目前的圖片旋轉(zhuǎn)功能還沒有添加支持 IE9 以下版本的代碼。

6.鍵盤控制

Magnify 和 Windows 照片查看器的按鍵是一樣的

← 上一張 → 下一張 + 放大 - 縮小 ctrl + alt + 0 實際尺寸 ctrl + , 向左旋轉(zhuǎn) ctrl + . 向右旋轉(zhuǎn) 7.全屏顯示

Magnify 的全屏顯示只實現(xiàn)了基本的展示功能，還沒有實現(xiàn)幻燈片自動輪播的功能。全屏環(huán)境下使用鍵盤控制圖片。

使用方法

Magnify 的使用和其他大多數(shù) lightbox 插件的用法并沒有兩樣，如果你習(xí)慣了其它插件的使用，使用 Magnify 也不會有任何障礙。

1.需要引用的文件

Magnify 默認(rèn)使用 font-awesome 的圖標(biāo)，所以需要引用 font-awesome 的 css 文件。如果你想使用其它圖標(biāo)，可以修改 options 的 icons 參數(shù)。在之后的版本中，我可能會添加定制的字體圖標(biāo)文件或者使用 svg 圖標(biāo)。

2.HTML 結(jié)構(gòu)

Magnify 默認(rèn)使用以下結(jié)構(gòu)，這樣的結(jié)構(gòu)可以做兼容處理，也是大多數(shù) lightbox 使用的結(jié)構(gòu)。

也可以使用下面更簡潔的結(jié)構(gòu)

Magnify 的 HTML 結(jié)構(gòu)包含以下幾個選項

添加 data-src 屬性可以鏈接到大圖。如果在 標(biāo)簽中使用，它會覆蓋 href 屬性的值。添加 data-caption 屬性可以顯示標(biāo)題。如果你不使用這個屬性，插件會顯示 URL 中的圖片名。添加 data-group 屬性可以對圖片分組。 3.初始化插件

如果在 HTML 中添加 data-magnify 屬性，插件會自動初始化。

手動初始化插件的方法和所有 jQuery 插件一樣：

$('[data-magnify=gallery]').magnify(options);

參數(shù)配置

options = {
  draggable: true,
  resizable: true,
  movable: true,
  keyboard: true,
  title: true,
  modalWidth: 320,
  modalHeight: 320,
  fixedContent: true,
  fixedModalSize: false,
  initMaximized: false,
  gapThreshold: 0.02,
  ratioThreshold: 0.1,
  minRatio: 0.1,
  maxRatio: 16,
  headToolbar: [
   'maximize',
   'close'
  ],
  footToolbar: [
   'zoomIn',
   'zoomOut',
   'prev',
   'fullscreen',
   'next',
   'actualSize',
   'rotateRight'
  ],
  icons: {
   maximize: 'fa fa-window-maximize',
   close: 'fa fa-close',
   zoomIn: 'fa fa-search-plus',
   zoomOut: 'fa fa-search-minus',
   prev: 'fa fa-arrow-left',
   next: 'fa fa-arrow-right',
   fullscreen: 'fa fa-photo',
   actualSize: 'fa fa-arrows-alt',
   rotateLeft: 'fa fa-rotate-left',
   rotateRight: 'fa fa-rotate-right'
  }
}

關(guān)于插件參數(shù)的具體含義，我就不在此復(fù)制黏貼了，請大家參考 官方文檔 的詳細(xì)說明。如有問題，可以在此留言。

自定義樣式

因為插件的樣式比較簡單，所以修改起來也非常容易。除了 Windows 照片查看器，QQ 的圖片查看器也非常的高大上。我們只要簡單修改就可以實現(xiàn) QQ 圖片查看器的效果，但是部分功能比如縮略圖還沒有實現(xiàn)。以下是實時演示：

面對這樣的圖片查看器足以令人心曠神怡~

總結(jié)

目前插件整體已經(jīng)趨于完善，但仍然有很多需要修改及添加的細(xì)節(jié)，尤其對移動端的支持，大家可以 star 一下隨時關(guān)注項目的更新動態(tài)。關(guān)于插件的介紹就不再贅述了，如果大家發(fā)現(xiàn)了 Bug 或者有更好的建議，可以在GitHub中提問，也可以在此留言，大家的支持是我前進(jìn)的最大動力！如果這款插件對你有幫助或者你在項目中使用了這款插件，歡迎留言告知！