图片/图形
纯JavaScript炫酷鼠标滑过图片放大镜特效插件
PetitQ
这是一款轻量级的纯 JavaScript 炫酷鼠标滑过图片放大特效插件。该插件有两种显示形式：鼠标点击和鼠标滑过。两种方式都可以制作出图片放大镜效果，并且还可以将这两种放大镜效果结合在一起使用。
使用方法
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：在页面中添加基本的样式
Github 地址：https://github.com/imgix/drift
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
