HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开发工具 查看内容

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

2016-12-16 09:43| 发布者: admin| 查看: 581| 评论: 0

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

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

 使用方法

在页面中引入slider.js文件

 

该手风琴图片画廊的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();


鲜花

握手

雷人

路过

鸡蛋

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-19 21:02

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部