简单的手风琴效果实现实际比看起来简单，只是改变当前的元素宽度和其他元素的宽度，其代码如下（图片什么的都要换成自己噢）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{width: 100%;height: 260px;margin: 10px auto;}
ul li{list-style: none;float: left;width: 200px;height: 260px;position: relative;}
ul li div{width: 100%;height: 260px;}
ul .text{width: 100%;height: 260px;background: rgba(0,0,0,0.2);position: absolute;}
.text h1{width: 30px;font-size: 30px;color: #fff;margin: 30px auto;}
.bg1{background: url("imgs/1.jpg") center;}
.bg2{background: url("imgs/2.jpg") center;}
.bg3{background: url("imgs/3.jpg") center;}
.bg4{background: url("imgs/4.jpg") center;}
.bg5{background: url("imgs/5.jpg") center;}
.bg6{background: url("imgs/6.jpg") center;}
</style>
<script src="libs/jquery-1.11.3.js"></script>
<script>
$(function () {
$('ul li').hover(function () {
$(this).find('.text').css('display','none');
$(this).stop().animate({
width : '400px'
}).siblings().stop().animate({
width : '160px'
});
}, function () {
$(this).children('.text').css('display','block');
$('ul li').stop().animate({
width : '200px'
})
})
})
</script>
</head>
<body>
<div class="box">
<ul>
<li class="li1">
<div class="text"><h1>简单手风琴1</h1></div>
<div class="bg1"></div>
</li>
<li>
<div class="text"><h1>简单手风琴2</h1></div>
<div class="bg2"></div>
</li>
<li>
<div class="text"><h1>简单手风琴3</h1></div>
<div class="bg3"></div>
</li>
<li>
<div class="text"><h1>简单手风琴4</h1></div>
<div class="bg4"></div>
</li>
<li>
<div class="text"><h1>简单手风琴5</h1></div>
<div class="bg5"></div>
</li>
<li>
<div class="text"><h1>简单手风琴6</h1></div>
<div class="bg6"></div>
</li>
</ul>
</div>
</body>
</html>
扫一扫
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
