手风琴动画图

html:

 

作者 ： 默默的墨墨

我的个人拉萨之旅｜｜故事之城

作者 ： 默默的墨墨

我的个人拉萨之旅｜｜故事之城

作者 ： 默默的墨墨

我的个人拉萨之旅｜｜故事之城

作者 ： 默默的墨墨

我的个人拉萨之旅｜｜故事之城

 

 

css:

 

*{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
.ig{
height:430px;
width:100px;
float:left;
cursor:pointer;
}
#igs{
height:430px;
width:1100px;
}

.ig1{
background-image:url("../img/1.jpg");
}
.ig2{
background-image:url("../img/2.jpg");
}
.ig3{
background-image:url("../img/3.jpg");
}
.ig4{
width:789px;
background-image:url("../img/4.jpg");
}
.txts{
height:430px;
width:100px;
background:rgba(0,0,0,.5);
}
.txts p{
color:#fff;
float:left;
margin:15px;

}
.p1{/*让文字竖排*/
width:12px;
font-size:12px;

}
.p2{
width:14px;
font-size:14px;

}

 

 

js:

 

$(function () {
$(".txts").mouseover(function () {
$(this).parent().stop(true,true).animate({ "width": "789px" }, 500).siblings().stop(true,true).animate({ "width": "100px" }, 500);
});
});

转载于:https://www.cnblogs.com/sunshinezjb/p/8550106.html