<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告动画</title>
<style>
*{
margin: 0;
padding: 0;
}
.contant{
min-width: 1200px;
position: relative;
height: 0px;
/*height: 150px;*/
/*height: 450px;*/
border: 1px solid red;
box-sizing: border-box;
overflow: hidden;
/*display: none;*/
}
.contant .contant-img{
width: 100%;
}
.contant .contant-img .img-a{
position: absolute;
width: 100%;
left: 0px;
top: 0px;
z-index: 0;
}
.contant .contant-img .img-b{
position: absolute;
width: 100%;
left: 0px;
top: 0px;
z-index: -1;
}
.contant-close{
font-size: 27px;
color: aliceblue;
position: absolute;
top: 10px;
right: 30px;
z-index: 2;
cursor: pointer;
}
</style>
</head>
<body>
<div class="contant">
<div class="contant-img">
<div class="img-a">
<a href=""><img src="public/imgs/big-xmg.jpg" alt=""></a>
</div>
<div class="img-b">
<a href=""><img src="public/imgs/small-xmg.jpg" alt=""></a>
</div>
</div>
<div class="contant-close">x</div>
</div>
<!--js-->
<script src="public/jquery-1.12.4.min.js"></script>
<script>
$(function () {
//折叠动画
$(".contant").animate({height:"450px"},3000).delay(1000)
.animate({height:"150px"},1000,function () {
$(this).find(".img-b").css("z-index","1");
});
//关闭
$(".contant-close").click(function () {
$(".contant").css({display:"none"})
});
});
</script>
</body>
</html>