在jQuery中圖片查看插件如何使用-js教程-PHP中文網

首頁

web前端

js教程

在jQuery中圖片查看插件如何使用

亚连

Jun 15, 2018 pm 03:11 PM

jquery

本篇文章主要跟大家說了jQuery圖片查看外掛Magnify開發的詳細分析，需要的朋友參考學習下。

前言

因為一些特殊的業務需求，經過一個多月的蟄伏及思考，我開發了這款jQuery 圖片檢視器外掛程式Magnify，它實現了Windows 照片檢視器的所有功能，例如模態窗的拖曳、調整大小、最大化，圖片的縮放、旋轉，平移、鍵盤控制等。外掛的樣式都是最基本的 CSS，客製化非常容易，可以輕鬆修改成自己喜歡的樣式。隨後會陸續發布 React 及 Vue 相關版本的插件。本文主要介紹插件的特點及使用方法，而關於插件開發的細節將會在之後的具體文章中說明。

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

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

開發小記

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

另外，開發插件的最大難度不是功能實現，而是如何設計插件，如何讓插件的使用更簡單、更方便。關於如何設計插件並不是本篇文章的重點，我會在之後專門寫一篇介紹插件設計想法的文章。

外掛程式所有的程式碼幾乎都是在調整彈跳窗或圖片的 width、height、left、top ，所以相容性問題不大，主要是 2D 旋轉問題，IE 9 以下需要使用濾鏡實作。為了方便調整樣式，其中有許多相對位置的計算。

Magnify 採用了檔案分離的方式編寫，使用 npm 外掛程式打包，並沒有使用新語法，也沒有使用現在流行的打包工具。使用 npm 工具已經是專案開發打包發布的趨勢。

示範

如果你不想點開網址查看範例的話，可以透過下面的CodePen 檢視外掛程式效果，除了視窗的大小之外，兩種方式沒有任何差別：

如果你的網路速度和其他原因不能打開CodePen 的話，可以查看下面的圖片示範。

主要功能

Magnify 的功能可以參考 Windows 照片檢視器，基本上完成了所有可以實現的功能。

1.模態視窗拖曳

如果圖片尺寸不大於展示區域，透過圖片展示區域也可以拖曳彈跳窗。這和 QQ 圖片檢視器的操作方式是相同的。

2.模態視窗調整大小

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

3.模態窗最大化

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

4.圖片縮放

可以透過滑鼠滾輪、按鈕、鍵盤等動作

5.圖片旋轉

#目前的圖片旋轉功能還沒有加入支援IE9 以下版本的程式碼。

6.鍵盤控制

#Magnify 和Windows 相片檢視器的按鍵是相同的

← 上一張→ 下一張放大- 縮小ctrl alt 0 實際尺寸ctrl , 向左旋轉ctrl . 向右旋轉7.全螢幕顯示

Magnify 的全螢幕顯示只實現了基本的展示功能，還沒有實現幻燈片自動輪播的功能。全螢幕環境下使用鍵盤控制圖片。

使用方法

Magnify 的使用和其他大多數 lightbox 外掛程式的用法並沒有兩樣，如果你習慣了其它外掛程式的使用，使用 Magnify 也不會有任何障礙。

1.需要引用的檔案

<link href="/path/to/magnify.css" rel="external nofollow" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

Magnify 預設使用 font-awesome 的圖標，所以需要引用 font-awesome 的 css 檔案。如果你想使用其它圖標，可以修改 options 的 icons 參數。在之後的版本中，我可能會添加自訂的字體圖示檔案或使用 svg 圖示。

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">

2.HTML 結構

Magnify 默认使用以下结构，这样的结构可以做兼容处理，也是大多数 lightbox 使用的结构。

<a data-magnify="gallery" href="big-1.jpg" rel="external nofollow" >
 <img  src="/static/imghwm/default1.png"  data-src="small-1.jpg"  class="lazy"   alt="在jQuery中圖片查看插件如何使用" >
</a>
<a data-magnify="gallery" href="big-2.jpg" rel="external nofollow" >
 <img  src="/static/imghwm/default1.png"  data-src="small-2.jpg"  class="lazy"   alt="在jQuery中圖片查看插件如何使用" >
</a>
<a data-magnify="gallery" href="big-3.jpg" rel="external nofollow" >
 <img  src="/static/imghwm/default1.png"  data-src="small-3.jpg"  class="lazy"   alt="在jQuery中圖片查看插件如何使用" >
</a>

也可以使用下面更简洁的结构

<img  src="/static/imghwm/default1.png"  data-src="big-1.jpg"  class="lazy"  data-magnify="gallery"   alt="在jQuery中圖片查看插件如何使用" >
<img  src="/static/imghwm/default1.png"  data-src="big-2.jpg"  class="lazy"  data-magnify="gallery"   alt="在jQuery中圖片查看插件如何使用" >
<img  src="/static/imghwm/default1.png"  data-src="big-3.jpg"  class="lazy"  data-magnify="gallery"   alt="在jQuery中圖片查看插件如何使用" >

Magnify 的 HTML 结构包含以下几个选项

添加 src 属性可以链接到大图。如果在 <a></a> 标签中使用，它会覆盖 href 属性的值。添加 data-caption 属性可以显示标题。如果你不使用这个属性，插件会显示 URL 中的图片名。添加 data-group 属性可以对图片分组。 3.初始化插件

如果在 HTML 中添加 data-magnify 属性，插件会自动初始化。

手动初始化插件的方法和所有 jQuery 插件一样：

$(&#39;[data-magnify=gallery]&#39;).magnify(options);

参数配置

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: [
   &#39;maximize&#39;,
   &#39;close&#39;
  ],
  footToolbar: [
   &#39;zoomIn&#39;,
   &#39;zoomOut&#39;,
   &#39;prev&#39;,
   &#39;fullscreen&#39;,
   &#39;next&#39;,
   &#39;actualSize&#39;,
   &#39;rotateRight&#39;
  ],
  icons: {
   maximize: &#39;fa fa-window-maximize&#39;,
   close: &#39;fa fa-close&#39;,
   zoomIn: &#39;fa fa-search-plus&#39;,
   zoomOut: &#39;fa fa-search-minus&#39;,
   prev: &#39;fa fa-arrow-left&#39;,
   next: &#39;fa fa-arrow-right&#39;,
   fullscreen: &#39;fa fa-photo&#39;,
   actualSize: &#39;fa fa-arrows-alt&#39;,
   rotateLeft: &#39;fa fa-rotate-left&#39;,
   rotateRight: &#39;fa fa-rotate-right&#39;
  }
}

关于插件参数的具体含义，我就不在此复制黏贴了，请大家参考官方文档的详细说明。如有问题，可以在此留言。

自定义样式

因为插件的样式比较简单，所以修改起来也非常容易。除了 Windows 照片查看器，QQ 的图片查看器也非常的高大上。我们只要简单修改就可以实现 QQ 图片查看器的效果，但是部分功能比如缩略图还没有实现。以下是实时演示：

面对这样的图片查看器足以令人心旷神怡~

上面是我整理给大家的，希望今后会对大家有帮助。

以上是在jQuery中圖片查看插件如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。