这一款使用纯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

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

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