響應(yīng)式j(luò)Query圖片放大鏡插件magnificent.js

簡(jiǎn)要教程

magnificent.js是一款響應(yīng)式j(luò)Query圖片放大鏡插件。該圖片放大鏡插件提供2種圖片縮放模式：圖片內(nèi)部縮放和圖片外部縮放。并且可以在圖片上使用鼠標(biāo)滾輪來(lái)對(duì)圖片進(jìn)行局部縮放。

安裝

可以通過(guò)npm或bower來(lái)安裝magnificent.js圖片放大鏡插件。

bower install magnificent --save
npm i magnificent --save

使用方法

該插件下載后有幾個(gè)可選的外部依賴(lài)庫(kù)，用于完成特定的功能：

• jquery.mousewheel.js：用于鼠標(biāo)滾動(dòng)局部縮放或移動(dòng)touchpad-pinch縮放。

• jquery.event.drag.js：用于拖放交互。

• screenfull.js：用于全屏顯示。

• hammer.js：用于移動(dòng)觸摸交互（平移或pinch）。

• PreventGhostClick.js：用于移動(dòng)觸摸交互（平移或pinch）。

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="bower_components/jquery.threedubmedia/event.drag/jquery.event.drag.js"></script>
<script src="bower_components/screenfull/dist/screenfull.js"></script>
<script src="bower_components/hammerjs/hammer.js"></script>
<script src="bower_components/prevent-ghost-click/PreventGhostClick.js"></script>

然后需要調(diào)用插件本身需要的文件：

<script src="bower_components/magnificent/src/js/mag-analytics.js"></script>
<script src="bower_components/magnificent/src/js/mag.js"></script>
<script src="bower_components/magnificent/src/js/mag-jquery.js"></script>
<script src="bower_components/magnificent/src/js/mag-control.js"></script>
<link rel="stylesheet" href="bower_components/magnificent/src/css/mag.css" />
<link rel="stylesheet" href="bower_components/magnificent/src/theme/default.css" />

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

圖片內(nèi)部放大鏡的HTML結(jié)構(gòu)為：

<div mag-thumb="inner">
  <img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="inner">
  <img src="img/alley/1000x600.jpg" />
</div>

圖片外部放大鏡的HTML結(jié)構(gòu)為：

<div mag-thumb="outer">
  <img src="img/alley/500x300.jpg" />
</div>
<div style="width: 300px; height: 300px;">
  <div mag-zoom="outer">
    <img src="img/alley/1000x600.jpg" />
  </div>
</div>

初始化插件

初始化圖片內(nèi)部放大鏡：

$host = $('[mag-thumb="inner"]');
$host.mag();

初始化圖片外部放大鏡：

$host = $('[mag-thumb="outer"]');
$host.mag({
  mode: 'outer',
  ratio: 1 / 1.6
});

配置參數(shù)

• mode：放大鏡的模式?？蛇x值有："inner"和"outer"。

• position：指定縮放交互區(qū)域的位置。

• "mirror"：默認(rèn)值?？s放區(qū)域跟隨鼠標(biāo)位置。

• "drag"：拖動(dòng)移動(dòng)。

• "joystick"：Weird joystick交互。

• false：No mouse/touch。

• positionEvent：定位的事件。

• "move"：默認(rèn)值。鼠標(biāo)移動(dòng)。

• "hold"：按住鼠標(biāo)。

• theme：主題。默認(rèn)值為"default"。

• initialShow：是否顯示縮略圖，如“inner”模式。默認(rèn)值為"thumb"。

• zoomRate：是否的比例，值從0到∞，默認(rèn)值為0.2。

• zoomMin：允許的最小縮放等級(jí)。值從0到∞，默認(rèn)值為2。

• zoomMax：允許的最大縮放等級(jí)。值從0到∞，默認(rèn)值為10。

• ratio：外部容器和內(nèi)部容器的比例，默認(rèn)值為1。

• constrainLens：是否約束放大鏡的位置。默認(rèn)值為true。

• constrainZoomed：是否約束縮放區(qū)域。默認(rèn)值為false。

• toggle：Whether toggle display of zoomed vs. thumbnail upon interaction.Default = true.

• smooth：縮放區(qū)域是否逐漸接近目標(biāo)，而不是立刻（平滑過(guò)渡）。默認(rèn)為true。

• cssMode：縮放和轉(zhuǎn)換的CSS模式，是3D還是2D，默認(rèn)為3D。

• initial：初始化模式-focus, lens, zoom等。