圖片展示上移效果
阿新 • • 發佈：2017-09-07
ntb light tle posit mage type images this charset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圖片展示顯示詳細說明和隱藏</title>
<meta charset=‘utf-8‘/>
<style type="text/css">
body, ul, li, ol {
list-style: none;
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: 微軟雅黑;
}
img {
border: 0px;
}
.picList {
width: 100%;
float: left;
}
.picList .col {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
float: left;
margin: 10px 0 0 10px;
}
.picList .col img, .col a {
position: absolute;
top: 0px;
left: 0px;
}
.picList .col img {
width: 100%;
}
.picList .col a {
display: block;
width: 280px;
height: 180px;
top: 160px;
background:#000;
color: white;
font-style: normal;
line-height: 25px;
padding: 10px;
opacity: 0.8;
text-decoration: none;
}
</style>
</head>
<body>
<div class=‘picList‘ id="picList">
<div class=‘col‘ id="pic1" >
<img src="1.jpg" />
<a href=‘#‘>學會html5 絕對的屌絲逆襲<br/>
本課程由淺入深，逐步推進，以示例為主線，詳細完整地介紹HTML5的新功能與新特征
</a>
</div>
<div class=‘col‘ id="pic2">
<img src="2.jpg" />
<a href=‘#‘>圓角水晶按鈕制作<br/>
網頁中的圓角按鈕和寬度自適應按鈕就這麽輕松制作！
</a>
</div>
<div class=‘col‘ id="pic3">
<img src="3.jpg" />
<a href=‘#‘>導航條菜單的制作<br/>
30分鐘教你輕松制作出各種形式的網站導航條菜單
</a>
</div>
</div>
<script>
function imgDisplay(){
var Div = document.getElementById(‘picList‘).getElementsByTagName(‘div‘);
var divHeight = 160;
for(var i =0 ;i<Div.length;i++){
Div[i].onmouseover = showMeg;
Div[i].onmouseout = hideMeg;
}
function showMeg(){
this.getElementsByTagName(‘a‘)[0].style.top = 0;
}
function hideMeg(){
this.getElementsByTagName(‘a‘)[0].style.top = divHeight+‘px‘;
}
}
imgDisplay();
</script>
</body>
</html>
效果：
圖片展示上移效果