这是一款轻量级的纯JavaScript炫酷鼠标滑过图片放大特效插件。该插件有两种显示形式：鼠标点击和鼠标滑过。两种方式都可以制作出图片放大镜效果，并且还可以将这两种放大镜效果结合在一起使用。
安装
可以通过NPM或Bower来安装Drift插件。
npm install drift-zoombower install drift |
使用方法
Luminous鼠标点击放大镜效果
下载压缩包，在页面中引入Luminous.js和luminous-basic.css文件。
<link rel="stylesheet" media="screen, projection" href="dist/luminous-basic.css"> <script src="dist/Luminous.js"></script> |
Luminous放大镜效果的HTML结构是使用一个超链接元素来包裹一张图片，超链接的地址是高清大图的地址，图片指向的是缩略图。
<a class="demo-trigger" href="img/wristwatch.jpg"> <img src="img/wristwatch-thumb.jpg"></a> |
完成上面的操作之后，可以通过下面的JS代码来进行初始化。
var demoTrigger = document.querySelector('.demo-trigger');new Luminous(demoTrigger); |
Drift鼠标滑过放大镜效果
下载压缩包，在页面中引入Drift.js和drift-basic.css文件。
<link rel="stylesheet" media="screen, projection" href="dist/drift-basic.css"> <script src="dist/Drift.js"></script> |
Drift图片放大镜的HTML结果和Luminous放大镜的区别是它使用data-zoom属性来作为高清大图。
<img class="demo-trigger" src="img/wristwatch-thumb.jpg" data-zoom="img/wristwatch-hd.jpg"> |
初始化Drift图片放大镜插件。
var demoTrigger = document.querySelector('.demo-trigger');new Drift(demoTrigger); |
结合使用Luminous和Drift
Luminous和Drift图片放大镜效果可以结合在一起使用。例如DEMO3的HTML结构如下：
<div class="wrapper"> <a class="demo-trigger" href="img/vintagecameras-hd.jpg"> <img src="img/vintagecameras-thumb.jpg"> </a> <div class="detail"> <section> <h1>......</h1> <p>......</p> </section> </div></div> |
初始化的方法如下：
var demoTrigger = document.querySelector('.demo-trigger');new Drift(demoTrigger, { paneContainer: document.querySelector('.detail'), inlinePane: 900, inlineOffsetY: -85, containInline: true, sourceAttribute: 'href'});new Luminous(demoTrigger); |
配置参数
namespace：生成元素的class名称前缀。默认值：null。showWhitespaceAtEdges：当接近边部时ZoomPane是否显示白边，默认值是false。containInline：内部的ZoomPane是否在内部。默认值为false。inlineOffsetX，inlineOffsetY：How much to offset the ZoomPane from the interaction point when inline.sourceAttribute：用于指向大图的属性，默认值为：data-zoom。zoomFactor：图片放大倍数。默认值为3。paneContainer：添加到非内部放大镜上面的DOM元素。默认值为：document.body。inlinePane：合适切换到内部放大镜模式。这个取值可以是一个布尔值或一个整数。如果为true，将一直是内部放大镜模式，如果为false，将在`windowWidth <= inlinePane时切换到内部放大镜模式。默认值为375。handleTouch：如果为true，touch事件将被启用。onShow：ZoomPane显示时触发。onHide：ZoomPane隐藏时触发。injectBaseStyles：在页面中添加基本的样式。
Drift插件的github地址为：https://github.com/imgix/drift
