浙江 杭州

纯JavaScript炫酷鼠标滑过图片放大镜特效插件

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-02-09

人气6848

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款轻量级的纯JavaScript炫酷鼠标滑过图片放大特效插件。该插件有两种显示形式:鼠标点击和鼠标滑过。两种方式都可以制作出图片放大镜效果,并且还可以将这两种放大镜效果结合在一起使用。

安装

可以通过NPM或Bower来安装Drift插件。

npm install drift-zoom
bower 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。
  • inlineOffsetXinlineOffsetY: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

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:632.23KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1599.html 非特殊说明,本文版权归原作者所有,转载请注明出处
纯JavaScript炫酷鼠标滑过图片放大镜特效插件

我当前G币余额:0 已下载次数:1

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

    
标签 纯js 放大镜 

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)