標籤：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="div1" style="margin-top: 30px;width: 160px;height: 160px;background-color: silver;position:relative; ">
<img src="1_chelen_jak.jpg" style="overflow: hidden">
<div class="box" style="width: 100%;height: 100%;position:absolute;opacity: 0.8;background-color: #002a80; top: 220px">
<p style="color: #fff">功夫不負有心人</p>
</div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script type="text/javascript">
$(‘.div1‘).hover(
function(){
$(‘.box‘).animate({‘top‘:0},300);
},
function(){
$(‘.box‘).animate({‘top‘: 300},200);
}
);
</script>
</body>
</html>
下了個例子，結果裡面內容太多，很多定位,overflow,一下子沒明白過來，我一直不知道那個box遮蓋層在哪裡，原來box自己設定了top自己top到上面或者底下去了，
再加上被一底層固定高度給overflow:hidden;
這個效果 給整個容器定個位position:relitive;
把box遮蓋層定個位position:absolute,top:-px;到對象的上面去或者top:px到對象底部看不見的地方
因為box相對容器絕對位置,所以添加hover(function,function)等滑鼠移入容器地區的時候，設定box的top為0,就到覆蓋了容器
$("容器").animate({‘top‘:0}); animate是動畫效果的移動，我之前還以為加了fadein()呢，鵝鵝鵝
滑鼠移除的時候把box的top設定大一點的數字，放到對象的上面或者底部看不見的地方就行了
overflow
jquery 圖片遮罩 墜落遮擋效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
