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

使用方法

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

HTML结构

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

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();