<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dd{
position: fixed;/*是固定定位，一窗口爲參照物*/
right: 0;
bottom: 0;
width: 230px;
height: 120px;
background-image: url(img/ad.jpg) ;
display: none;
}
.dd span {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 18px;
background-image: url(img/h.jpg);
cursor: pointer;/*讓光標成爲一隻手*/
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
//需求：然廣告ad部分，先滑入，在滑出，在淡入。然後綁定事件，點擊span彈出
//步驟： slideDown 從下面往上出現 slideDown從上往下消失 fadeIn淡入
$(".dd").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {//找到span 點擊時
$(this).parent().fadeOut(1000);//從父標籤淡出 這裏的this代表.dd這個div
});
//第二種寫法
// (“.ad”).slideDown(1000, function () {
// (“.ad”).slideUp(1000, function () {
// (“.ad”).fadeIn(1000, function () {
// (“.ad”).children(“span”).click(function () {
// $(this).parent().fadeOut(1000, function () {
// alert(“執行完畢！”);
// });
// });
// });
// });
// });
});
</script>
</head>
<body>
<div class="dd">
<span></span>
</div>
</body>