首页 > 技术资源分享 > 手风琴式滑块CSS3,实测分享
2012
11-28

手风琴式滑块CSS3,实测分享

手风琴效果其实并不罕见。但是在CSS3问世之前,我们都需要通过JS来实现这种动态效果。

css3问世后,这种效果已经不需要臃肿的JS来实现,可以由浏览器直接完成,直接提升了运行效率和稳定性。

下面给大家分享实测后的效果吧。

代码实测:





CSS3手风琴效果,非JS实现——前端开拓者


html代码部分:

<div class=”accordian”>
<ul>
<li>
<div class=”image_title”>
<a href=”#”>KungFu Panda</a>
</div>
<a href=”#”>
<img src=”http://www.frontopen.com/wp-content/uploads/2012/11/3yiC6Yq.jpg”/>
</a>
</li>
<li>
<div class=”image_title”>
<a href=”#”>Toy Story 2</a>
</div>
<a href=”#”>
<img src=”http://www.frontopen.com/wp-content/uploads/2012/11/40Ly3VB.jpg”/>
</a>
</li>
<li>
<div class=”image_title”>
<a href=”#”>Wall-E</a>
</div>
<a href=”#”>
<img src=”http://www.frontopen.com/wp-content/uploads/2012/11/00kih8g.jpg”/>
</a>
</li>
<li>
<div class=”image_title”>
<a href=”#”>Up</a>
</div>
<a href=”#”>
<img src=”http://www.frontopen.com/wp-content/uploads/2012/11/2rT2vdx.jpg”/>
</a>
</li>
<li>
<div class=”image_title”>
<a href=”#”>Cars 2</a>
</div>
<a href=”#”>
<img src=”http://www.frontopen.com/wp-content/uploads/2012/11/8k3N3EL.jpg”/>
</a>
</li>
</ul>
</div>

CSS3部分:

* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
font-family: arial, verdana, tahoma;
}

/*手风琴的参数规划
图像宽度=640px
图片总数= 5
hover触发的宽度=640px
hover以外的图片=40px的宽度 – 设置任意宽度
手风琴的总宽度= 640+ 40 *4 =800px;
默认宽度= 800/5=160px;
*/
.accordian {
width: 805px; height: 320px;
overflow: hidden;

margin: 100px auto;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*加上一些hack防止某些浏览器出现闪烁问题*/
.accordian ul {
width: 2000px;
/*设置足够的宽度,以便于整体图片的来回移动.*/
}

.accordian li {
position: relative;
display: block;
width: 160px;
float: left;

border-left: 1px solid #888;

box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

/*动画转换效果*/
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
/*现在把鼠标悬停在图像上,可以看到基本的手风琴效果了*/
}

.accordian ul:hover li {width: 40px;}
.accordian ul li:hover {width: 640px;}
.accordian li img {
display: block;
}

/*Image title styles*/
.image_title {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0;
width: 640px;

}
.image_title a {
display: block;
color: #fff;
text-decoration: none;
padding: 20px;
font-size: 16px;
}

 

最后编辑:
作者:品味人生
就是一个管理员,frontopen的管理员,嗯,介绍完毕!
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!