响应式jQuery图片放大镜插件magnificent.js

所属分类:媒体-图像,图片展示

 6333  41  查看评论 (3)
响应式jQuery图片放大镜插件magnificent.js ie兼容10

简要教程

magnificent.js是一款响应式jQuery图片放大镜插件。该图片放大镜插件提供2种图片缩放模式:图片内部缩放和图片外部缩放。并且可以在图片上使用鼠标滚轮来对图片进行局部缩放。

安装

可以通过npm或bower来安装magnificent.js图片放大镜插件。

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

使用方法

该插件下载后有几个可选的外部依赖库,用于完成特定的功能:

  • 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等。


相关插件-图像,图片展示

自动调整背景Anystretch

可以调整适应容器尺寸的背景图像
  图像
 7972  14

zoomy 图片放大镜

zoomy 图片放大镜.使用简单.
  图像
 9168  33
  图像
 5763  33

图像裁剪插件

使用JavaScript和HTML5 Canvas元素调整和裁剪图像,要正确测试此演示,请使用本地服务器,如XAMPP或WAMP。
  图像
 8633  42

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    ╇鱼香 0
    2016/12/28 17:12:02

    唯一的缺点是移动到边缘的时候放大会出现图像后面的背景,看起来体验不好。

    回复
    鹤峰女婿 0
    2016/8/26 10:08:09
    还是不错的
        鹤峰女婿0
        2016/8/26 10:08:02
        测试下/
    回复
取消回复
    PROMULGATOR

    z林

    火星