資訊專欄INFORMATION COLUMN
摘要：隨后會(huì)陸續(xù)發(fā)布及相關(guān)版本的插件。這和圖片查看器的操作方式是相同的。目前的調(diào)整大小存在一點(diǎn)，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。
前言
因?yàn)橐恍┨厥獾臉I(yè)務(wù)需求，經(jīng)過一個(gè)多月的蟄伏及思考，我開發(fā)了這款 jQuery 圖片查看器插件 Magnify，它實(shí)現(xiàn)了 Windows 照片查看器的所有功能，比如模態(tài)窗的拖拽、調(diào)整大小、最大化，圖片的縮放、平移、旋轉(zhuǎn)，鍵盤控制等。插件的樣式都是最基礎(chǔ)的 CSS，定制非常容易，可以輕松修改成自己喜歡的樣式。隨后會(huì)陸續(xù)發(fā)布 React 及 Vue 相關(guān)版本的插件。本文主要介紹插件的特點(diǎn)及使用方法，而關(guān)于插件開發(fā)的細(xì)節(jié)將會(huì)在之后的具體文章中說明。
Github: https://github.com/nzbin/magnify開發(fā)小記Website: https://nzbin.github.io/magnify
由于最近工作繁忙，幾乎每天都是晚上十點(diǎn)到家，然后開始編寫插件，睡覺時(shí)已過凌晨，如今身心俱疲。因?yàn)闆]有找到相關(guān)的插件，所以很多問題都是絞盡腦汁獨(dú)立思考，比如以鼠標(biāo)為中心縮放圖片、改變彈窗大小時(shí)對(duì)圖片移動(dòng)的限制、圖片旋轉(zhuǎn)之后的縮放、平移等問題，而開發(fā)插件最讓人頭疼的就是細(xì)節(jié)，甚至大部分時(shí)間是在修復(fù)單一功能的 bug 。
另外，開發(fā)插件的最大難度不是功能實(shí)現(xiàn)，而是如何設(shè)計(jì)插件，如何讓插件的使用更簡(jiǎn)單、更方便。關(guān)于如何設(shè)計(jì)插件并不是本篇文章的重點(diǎn)，我會(huì)在之后專門寫一篇介紹插件設(shè)計(jì)思想的文章。
插件所有的代碼幾乎都是在調(diào)整彈窗或者圖片的 width、height、left、top ，所以兼容性問題不大，主要是 2D 旋轉(zhuǎn)問題，IE 9 以下需要使用濾鏡實(shí)現(xiàn)。為了方便調(diào)整樣式，其中有很多相對(duì)位置的計(jì)算。
Magnify 采用了文件分離的方式編寫，使用 npm 插件打包，并沒有使用新語法，也沒有使用現(xiàn)在流行的打包工具。使用 npm 工具已經(jīng)是項(xiàng)目開發(fā)打包發(fā)布的一個(gè)趨勢(shì)。
演示如果你不想點(diǎn)開網(wǎng)址查看示例的話，可以通過下面的 CodePen 查看插件效果，除了視窗的大小之外，兩種方式?jīng)]有任何區(qū)別：
See the Pen A jQuery lightbox plugin to view images just like in Windows.
如果你的網(wǎng)速和其他原因不能打開 CodePen 的話，可以查看下面的圖片演示。
主要功能Magnify 的功能可以參考 Windows 照片查看器，基本完成了可以實(shí)現(xiàn)的所有功能。
1.模態(tài)窗拖拽如果圖片尺寸不大于展示區(qū)域，通過圖片展示區(qū)域也可以拖拽彈窗。這和 QQ 圖片查看器的操作方式是相同的。
2.模態(tài)窗調(diào)整大小可以通過參數(shù)設(shè)置模態(tài)窗的最小寬高。目前的調(diào)整大小存在一點(diǎn) bug，但不影響整體的使用。
3.模態(tài)窗最大化除了彈窗最大化，開發(fā)初期也設(shè)計(jì)了最小化的功能，但感覺有些雞肋，所以暫時(shí)沒有添加。
4.圖片縮放可以通過鼠標(biāo)滾輪、按鈕、鍵盤等操作。
5.圖片旋轉(zhuǎn)目前的圖片旋轉(zhuǎn)功能還沒有添加支持 IE9 以下版本的代碼。
6.鍵盤控制Magnify 和 Windows 照片查看器的按鍵是一樣的。
← 上一張
→ 下一張
+ 放大
- 縮小
ctrl + alt + 0 實(shí)際尺寸
ctrl + , 向左旋轉(zhuǎn)
ctrl + . 向右旋轉(zhuǎn)
7.全屏顯示Magnify 的全屏顯示只實(shí)現(xiàn)了基本的展示功能，還沒有實(shí)現(xiàn)幻燈片自動(dòng)輪播的功能。全屏環(huán)境下使用鍵盤控制圖片。
使用方法Magnify 的使用和其他大多數(shù) lightbox 插件的用法并沒有兩樣，如果你習(xí)慣了其它插件的使用，使用 Magnify 也不會(huì)有任何障礙。
1.需要引用的文件Magnify 默認(rèn)使用 font-awesome 的圖標(biāo)，所以需要引用 font-awesome 的 css 文件。如果你想使用其它圖標(biāo)，可以修改 options 的 icons 參數(shù)。在之后的版本中，我可能會(huì)添加定制的字體圖標(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ǎn)潔的結(jié)構(gòu)
Magnify 的 HTML 結(jié)構(gòu)包含以下幾個(gè)選項(xiàng)
添加 data-src 屬性可以鏈接到大圖。如果在 標(biāo)簽中使用，它會(huì)覆蓋 href 屬性的值。
添加 data-caption 屬性可以顯示標(biāo)題。如果你不使用這個(gè)屬性，插件會(huì)顯示 URL 中的圖片名。
添加 data-group 屬性可以對(duì)圖片分組。
3.初始化插件如果在 HTML 中添加 data-magnify 屬性，插件會(huì)自動(dòng)初始化。
手動(dòng)初始化插件的方法和所有 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ù)制黏貼了，請(qǐng)大家參考 官方文檔 的詳細(xì)說明，以后的參數(shù)變化不會(huì)在博客中更新。如有問題，可以在此留言。
自定義樣式因?yàn)椴寮臉邮奖容^簡(jiǎn)單，所以修改起來也比較容易。除了 Windows 照片查看器，QQ 的圖片查看器也非常的高大上。我們只要簡(jiǎn)單修改就可以實(shí)現(xiàn) QQ 圖片查看器的效果，但是部分功能比如縮略圖還沒有實(shí)現(xiàn)。
See the Pen Magnify with another viewer style
面對(duì)這樣的圖片查看器足以令人心曠神怡~
目前插件整體已經(jīng)趨于完善，但仍然有很多需要修改及添加的細(xì)節(jié)，尤其對(duì)移動(dòng)端的支持，大家可以 star 一下隨時(shí)關(guān)注項(xiàng)目的更新動(dòng)態(tài)。關(guān)于插件的介紹就不再贅述了，如果大家發(fā)現(xiàn)了 Bug 或者有更好的建議，可以在 GitHub 中提問，也可以在此留言，大家的支持是我前進(jìn)的最大動(dòng)力！如果這款插件對(duì)你有幫助或者你在項(xiàng)目中使用了這款插件，歡迎留言告知！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/51623.html
摘要：隨后會(huì)陸續(xù)發(fā)布及相關(guān)版本的插件。這和圖片查看器的操作方式是相同的。目前的調(diào)整大小存在一點(diǎn)，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因?yàn)橐恍┨厥獾臉I(yè)務(wù)需求，經(jīng)過一個(gè)多月的蟄...
摘要：隨后會(huì)陸續(xù)發(fā)布及相關(guān)版本的插件。這和圖片查看器的操作方式是相同的。目前的調(diào)整大小存在一點(diǎn)，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因?yàn)橐恍┨厥獾臉I(yè)務(wù)需求，經(jīng)過一個(gè)多月的蟄...
摘要：發(fā)布應(yīng)用市場(chǎng)的平臺(tái)搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點(diǎn)個(gè)開源不易。作者將原素材文章進(jìn)行了新內(nèi)容的添加和重新排列，但是因?yàn)槲恼赂咝У拇a編寫技巧總結(jié)前端掘金本文總結(jié)了代碼編寫技巧，來提升你的和代碼。 收藏安卓開發(fā)中非常實(shí)用優(yōu)秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉(zhuǎn)念一想,已經(jīng)有這么多優(yōu)秀的庫了,就沒必要再去重復(fù)造輪子了,便歸納工作中比...
閱讀 3862·2021-11-24 10:23
閱讀 2853·2021-09-06 15:02
閱讀 1362·2021-08-23 09:43
閱讀 2435·2019-08-30 15:44
閱讀 3143·2019-08-30 13:18
閱讀 921·2019-08-23 16:56
閱讀 1822·2019-08-23 16:10
閱讀 639·2019-08-23 15:08
