这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效。该手风琴图片相册在鼠标滑过时,相应的图片会水平展开,而图片的说明文字则会垂直滑动上来,形成一些视觉差的感觉。
使用方法
在页面中引入slider.js文件
<script type="text/javascript" src="js/slider.js"></script>
HTML结构
该手风琴图片画廊的HTML结构如下。
<div id="center"> <div id="slider"> <div class="slide"> <img class="diapo" src="images/sf10.jpg" alt=""> <div class="text"> <span class="title">标题</span> 描述文字... </div> </div> <div class="slide"> <img class="diapo" src="images/sf14.jpg" alt=""> <div class="text"> <span class="title">标题</span> 描述文字... </div> </div> ...... </div> </div>
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();
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!