图片/图形
响应式jQuery图片放大镜插件
PetitQ
magnificent.js 是一款响应式 jQuery 图片放大镜插件。该图片放大镜插件提供 2 种图片缩放模式：图片内部缩放和图片外部缩放。并且可以在图片上使用鼠标滚轮来对图片进行局部缩放。
使用方法
该插件下载后有几个可选的外部依赖库，用于完成特定的功能：
也想出现在这里？联系我们吧
jquery.mousewheel.js：用于鼠标滚动局部缩放或移动 touchpad-pinch 缩放
jquery.event.drag.js：用于拖放交互
screenfull.js：用于全屏显示
hammer.js：用于移动触摸交互（平移或 pinch）
PreventGhostClick.js：用于移动触摸交互（平移或 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>
然后需要调用插件本身需要的文件：
<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 结构
图片内部放大镜的 HTML 结构为：
<div mag-thumb="inner">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="inner">
<img src="img/alley/1000x600.jpg" />
</div>
图片外部放大镜的 HTML 结构为：
<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>
初始化插件
初始化图片内部放大镜：
$host = $('[mag-thumb="inner"]');
$host.mag();
初始化图片外部放大镜：
$host = $('[mag-thumb="outer"]');
$host.mag({
mode: 'outer',
ratio: 1 / 1.6
});
配置参数
mode：放大镜的模式。可选值有："inner"和"outer"
position：指定缩放交互区域的位置
"mirror"：默认值。缩放区域跟随鼠标位置"drag"：拖动移动"joystick"：Weird joystick交互false：No mouse/touch
positionEvent：定位的事件。
"move"：默认值。鼠标移动"hold"：按住鼠标
theme：主题。默认值为"default"
initialShow：是否显示缩略图，如“inner”模式。默认值为"thumb"
zoomRate：是否的比例，值从 0 到∞，默认值为 0.2
zoomMin：允许的最小缩放等级。值从 0 到∞，默认值为 2
zoomMax：允许的最大缩放等级。值从 0 到∞，默认值为 10
ratio：外部容器和内部容器的比例，默认值为 1
constrainLens：是否约束放大镜的位置。默认值为 true
constrainZoomed：是否约束缩放区域。默认值为 false
toggle：Whether toggle display of zoomed vs. thumbnail upon interaction.Default = true
smooth：缩放区域是否逐渐接近目标，而不是立刻（平滑过渡）。默认为 true
cssMode：缩放和转换的 CSS 模式，是 3D 还是 2D，默认为 3D
initial：初始化模式-focus, lens, zoom 等
Github 地址：https://github.com/adjohnson916/magnificent.js
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
