js遮罩層上拉 下拉 程式碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.zhezhao{ width:1200px; margin: 0 auto; position: relative; overflow: hidden;}
.zhezhao a{ overflow: hidden; float: left; margin-right: 10px }
.zhezhao a img{ width:220px; height: 220px; }
.zhezhao a p{
background-color: rgba(4, 4, 4, 0.7);
width:220px;
color: #fff;
font-size: 12px;
position: absolute;
overflow: hidden;
/* top: 0px; 此時遮罩從上往下*/
/* bottom: 0px; 此時遮罩從下往上，注意父級元素必須設定 overflow: hidden;*/
bottom: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
</style>
<div class="zhezhao">
<a href=""><img src=""><p>我是文字我是文字</p></a>
<a href=""><img src=""><p>我是文字我是文字</p></a>
<a href=""><img src=""><p>我是文字我是文字</p></a>
<a href=""><img src=""><p>我是文字我是文字</p></a>
<a href=""><img src=""><p>我是文字我是文字</p></a>
</div>
<script type="text/javascript">
//
//hover() 方法規定當滑鼠指標懸停在被選元素上時要執行的兩個函式。
//方法觸發 mouseenter 和 mouseleave 事件。
//注意: 如果只指定一個函式，則 mouseenter 和 mouseleave 都執行它。
//
//
//jQuery stop() 方法用於停止動畫或效果，在它們完成之前。
// stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。
//
//
// animate() 方法執行 CSS 屬性集的自定義動畫。
// 該方法通過 CSS 樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以建立動畫效果。
// 只有數字值可建立動畫（比如 "margin:30px"）。字串值無法建立動畫（比如 "background-color:red"）。
// 提示：請使用 "+=" 或 "-=" 來建立相對動畫。
//
//
$(".zhezhao a").hover(function(){
$(this).find("p").stop().animate({height:"100%"},300)
},function() {
$(this).find("p").stop().animate({height:"0%"},300)
})
</script>
</body>
</html>