在线建站培训
您的位置: 魔客吧站长论坛网页特效查看内容

炫酷鼠标滑过图片特效

轮子 发表于 2017-7-17 12:07:04 | 栏目:网页特效
网站特效
效果: 其它 
脚本: jQuery特效 
125624rppmsqmwjtnzm2ew.jpg.thumb.jpg


简要教程


这是一款轻量级的纯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。
◦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:在页面中添加基本的样式。
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

售价:免费  [充值金币]  [免费赚金币]  [关于会员等级] 
下载权限: 无下载限制  [购买VIP]   [免费升VIP]

说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵犯您的版权,请及时联系我们,我们将尽快处理。