弹性效果的图片展示画廊特效

PetitQ 图片/图形 2018-11-17 1.69K 0 0

这一款使用纯 js 制作的弹性效果的图片展示画廊特效。该图片展示特效中，图片在鼠标滑过时带有炫酷的弹性晃动效果，并且图片会跟随鼠标移动，整体效果非常的酷。

使用方法

在页面中引入 diapo.js 文件。

也想出现在这里？联系我们吧

<script type="text/javascript" src="js/diapo.js"></script>

HTML 结构

该图片展示画廊的 HTML 结构如下：

```
<div id="diapoContainer">
```

      <img class="imgsrc" src="images/1.jpg" alt="Reconsider your Existence">

      <img class="imgsrc" src="images/2.jpg" alt="Something Needs to be Discovered">

      <img class="imgsrc" src="images/3.jpg" alt="They Said Very Little">

      <img class="imgsrc" src="images/4.jpg" alt="Only in Your Mind">

      <img class="imgsrc" src="images/5.jpg" alt="The Power of Imagination">

      <img class="imgsrc" src="images/6.jpg" alt="Objectivity is Impossible">

      <img class="imgsrc" src="images/7.jpg" alt="Cleaning Up Operation">

      <img class="imgsrc" src="images/8.jpg" alt="Arbitrary Contents">

```
      <div id="bkgcaption"></div>
```
```
      <div id="caption"></div>
```
```
</div>
```

CSS 样式

为该图片画廊特效添加下面的必要的 CSS 样式。

```
html {
```
```
  overflow: hidden;
```
```
}
```
```
 
```
```
body {
```
```
  margin: 0px;
```
```
  padding: 0px;
```
```
  background: #000;
```
```
  position: absolute;
```
```
  width: 100%;
```
```
  height: 100%;
```
```
  cursor: crosshair;
```
```
}
```
```
 
```
```
#diapoContainer {
```
```
  position: absolute;
```
```
  left: 10%;
```
```
  top: 15%;
```
```
  width: 80%;
```
```
  height: 80%;
```
```
  background: #222;
```
```
  overflow: hidden;
```
```
}
```
```
 
```
```
.imgDC {
```
```
  position: absolute;
```
```
  cursor: pointer;
```
```
  border: #000 solid 2px;
```
```
  filter: alpha(opacity=90);
```
```
  opacity: 0.9;
```
```
  visibility: hidden;
```
```
}
```
```
 
```
```
.spaDC {
```
```
  position: absolute;
```
```
  filter: alpha(opacity=20);
```
```
  opacity: 0.2;
```
```
  background: #000;
```
```
  visibility: hidden;
```
```
}
```
```
 
```
```
.imgsrc {
```
```
  position: absolute;
```
```
  width: 250px;
```
```
  height: 140px;
```
```
  visibility: hidden;
```
```
  margin: 4%;
```
```
}
```
```
 
```
```
#bkgcaption {
```
```
  position: absolute;
```
```
  bottom: 0px;
```
```
  left: 0px;
```
```
  width: 100%;
```
```
  height: 6%;
```
```
  background:#1a1a1a;
```
```
}
```
```
#caption {
```
```
  position: absolute;
```

  font-family: arial, helvetica, verdana, sans-serif;

```
  white-space: nowrap;
```
```
  color: #fff;
```
```
  bottom: 0px;
```
```
  width: 100%;
```
```
  left: -10000px;
```
```
  text-align: center;
```
```
}
```

JavaScript

在页面底部，标签之前使用下面的代码来初始化该图片画廊特效。

```
function dom_onload() {
```

    if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);

```
  }
```
```
  dom_onload();
```

弹性效果的图片展示画廊特效

已有 422 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

弹性效果的图片展示画廊特效

使用方法

HTML 结构

CSS 样式

JavaScript

弹性效果的图片展示画廊特效

相关文章

Canvas 擦抹模糊玻璃特效

Parallux 响应式网页滚动视觉差特效

响应式图片懒加载的js插件

发表回复取消回复

热销模板

图片/图形

使用方法

HTML 结构

CSS 样式

JavaScript

弹性效果的图片展示画廊特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复