“效果系列一”：jQuery 手风琴效果

最新推荐文章于 2024-08-22 14:32:34 发布

weixin_34029680

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量60

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/zyxchuxin/blog/516990

版权

2019独角兽企业重金招聘Python工程师标准>>>

因为实现方式比较简单，直接上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现手风琴效果</title>
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
.wrapper{
width:600px;
margin:20px auto;
padding: 20px;
overflow: hidden;
}
.imgs{
float: left;
height:200px;
width:20%;
}
.img-1{
background:#ccc url(images/1.jpg) no-repeat;
}
.img-2{
background:#ccc url(images/2.jpg) no-repeat;
}
.img-3{
background:#ccc url(images/3.jpg) no-repeat;
}
.img-4{
background:#ccc url(images/4.jpg) no-repeat;
}
.img-5{
background:#ccc url(images/5.jpg) no-repeat;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="imgs img-1"></li>
<li class="imgs img-2"></li>
<li class="imgs img-3"></li>
<li class="imgs img-4"></li>
<li class="imgs img-5"></li>
</ul>
<script src="jquery-2.0.3.min.js"></script>
<script>
(function(){
$(".imgs").mouseover(function(){
$(".imgs").not($(this)).animate({
width:"15%"
},600);
$(this).animate({
width:"40%"
},600);
}).mouseout(function(){
$(".imgs").animate({
width:"20%"
},600);
});
})();
</script>
</body>
</html>

效果图：