@EncyKe
2016-05-09T02:18:42.000000Z
字数 1967
阅读 2657
前端
JavaScript
<ul id="picList">
<li>
<img src="1.jpg" />
<a href='#'>
学会html5 绝对的屌丝逆袭<br/>
本课程由浅入深,逐步推进,以示例为主线,详细完整地介绍HTML5的新功能与新特征
</a>
</li>
</ul>
*{
transition: all .2s ease-in;
/* 可增加动效,但兼容性不佳; */
}
body, ul, li, ol {
list-style: none;
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: 微软雅黑;
}
img {
border: 0px;
}
ul {
width: 100%;
float: left;
}
li{
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
float: left;
margin: 10px 0 0 10px;
}
img, a {
position: absolute;
top: 0px;
left: 0px;
}
img {
width: 100%;
}
a {
display: block;
width: 280px;
height: 180px;
top: 160px;
background:#000;
color: white;
font-style: normal;
line-height: 25px;
padding: 10px;
text-decoration: none;
filter:alpha(Opacity=80);
-moz-opacity:0.8;
-ms-opacity: 0.8;
-khtml-opacity: 0.8;
-webkit-opacity: 0.8;
-0-opacity: 0.8;
opacity: 0.8;
}
function imgDisplay(){
var li = document.getElementById('picList').getElementsByTagName('li');
var liHeight = 160;
for(var i = 0; i < li.length; i++){
li[i].onmouseover = showMeg;
li[i].onmouseout = hideMeg;
}
function showMeg(){
this.getElementsByTagName('a')[0].style.top = 0;
}
function hideMeg(){
this.getElementsByTagName('a')[0].style.top = liHeight+'px';
}
}
imgDisplay();
HTML部分同上,CSS代码如下:
*{
transition: all .1s ease-in;
}
body, ul, li, ol {
list-style: none;
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: 微软雅黑;
}
img {
border: 0px;
}
ul {
width: 100%;
float: left;
}
li{
width: 300px;
height: 200px;
position: absolute;
float: left;
top: 50%;
left: 50%;
margin: -150px 0 0 -100px;
}
img, a {
position: absolute;
top: 0px;
left: 0px;
}
img {
width: 100%;
}
a {
display: block;
width: 280px;
height: 150px;
top: auto;
bottom: 60px;
background:#000;
color: white;
font-style: normal;
line-height: 25px;
padding: 10px;
text-decoration: none;
filter:alpha(Opacity=0);
-moz-opacity:0;
-ms-opacity: 0;
-khtml-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
opacity: 0;
}
img:hover+a,
a:hover{
bottom: 30px;
filter:alpha(Opacity=80);
-moz-opacity:0.8;
-ms-opacity: 0.8;
-khtml-opacity: 0.8;
-webkit-opacity: 0.8;
-o-opacity: 0.8;
opacity: 0.8;
}