手风琴动画图

公告

View Post

html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo3.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo3.js"></script>
</head>
<body>
<div id="igs">
<div class="ig ig1">
<div class="txts">
<p class="p1">作者：默默的墨墨</p>
<p class="p2">我的个人拉萨之旅｜｜故事之城</p>
</div>
</div>
<div class="ig ig2">
<div class="txts">
<p class="p1">作者：默默的墨墨</p>
<p class="p2">我的个人拉萨之旅｜｜故事之城</p>
</div>
</div>
<div class="ig ig3">
<div class="txts">
<p class="p1">作者：默默的墨墨</p>
<p class="p2">我的个人拉萨之旅｜｜故事之城</p>
</div>
</div>
<div class="ig ig4">
<div class="txts">
<p class="p1">作者：默默的墨墨</p>
<p class="p2">我的个人拉萨之旅｜｜故事之城</p>
</div>
</div>
</div>
</body>
</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);
});
});

posted on 2018-03-12 16:40 sunshinezjb 阅读(215) 评论(0) 收藏举报

刷新页面返回顶部