html5手机手风琴相册,纯js带弹性动画的手风琴图片相册特效

这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效。该手风琴图片相册在鼠标滑过时，相应的图片会水平展开，而图片的说明文字则会垂直滑动上来，形成一些视觉差的感觉。

使用方法

在页面中引入slider.js文件

HTML结构

该手风琴图片画廊的HTML结构如下。

标题

描述文字...

标题

描述文字...

......

CSS样式

为该手风琴图片画廊添加如下的CSS样式。

html {

overflow: hidden;

}

body {

position: absolute;

margin: 0px;

padding: 0px;

background: #111;

width: 100%;

height: 100%;

}

#center {

position: absolute;

left: 50%;

top: 50%;

}

#slider {

position: absolute;

width: 820px;

height: 333px;

left: -430px;

top: -186px;

overflow: hidden;

background: #000;

border: 20px solid #000;

}

#slider .slide {

position: absolute;

top: 0px;

height: 333px;

width: 500px;

background: #000;

overflow: hidden;

border-left: #000 solid 1px;

cursor: default;

}

#slider .title {

color: #F80;

font-weight: bold;

font-size: 1.2em;

margin-right: 1.5em;

text-decoration: none;

}

#slider .backgroundText {

position: absolute;

width: 100%;

height: 100%;

top: 100%;

background: #000;

filter: alpha(opacity=40);

opacity: 0.4;

}

#slider .text {

position: absolute;

top: 1%;

top: 100%;

color: #FFF;

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

font-size: 0.9em;

text-align: justify;

width: 470px;

left: 10px;

}

#slider .diapo {

position: absolute;

filter: alpha(opacity=100);

opacity: 1;

visibility: hidden;

}

初始化插件

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

slider.init();