<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#ad{
position: absolute;
right: 0;
bottom: 0;
}
#close{
position: absolute;
top: 2px;
right: 10px;
cursor: pointer;
}
</style>
<script>
$(function () {
$("#ad").slideDown("slow")
.slideUp("normal")
.fadeIn(1000)
.children("#close").click(function () {
$(this).parent().fadeOut();
})
})
</script>
</head>
<body>
<div id="ad">
<img src="ad.jpg" alt=""/>
<img src="h.jpg" alt="" id="close"/>
</div>
</body>
</html>
![](https://images2018.cnblogs.com/blog/1366070/201809/1366070-20180905191329038-591926251.jpg)
![](https://images2018.cnblogs.com/blog/1366070/201809/1366070-20180905191337254-518905510.jpg)