HTML画廊效果,超酷js弹性效果的图片展示画廊特效

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