(原创)图片划过出现提示信息或者是标题信息的实现方法css+js

2015 年 3 月 29 日2015 年 4 月 2 日 by 沧海之树 In JavaScript技术, 工作

css代码

.photo {
position:relative;
overflow:hidden;
width:236px;
height:442px;
float:left;
}
.photo .heading, .photo .caption {
position:absolute;
background:#000;
height:110px;
width:236px;
opacity:0.8;
}
.photo .heading {
top:-110px;
}
.photo .caption {
bottom:-110px;
left:0px;
}
.photo .heading span {
color:#FFF;
top:-110px;
font-weight:bold;
display:inline-block;
padding:5px 0 0 10px;
}
.photo .caption span {
color:#FFF;
font-size:9px;
display:inline-block;
padding:5px 10px 0 10px;
}

js代码：

// transition effect
style = 'easeOutQuart';
// if the mouse hover the image
$('.photo').hover(
function() {
//display heading and caption
//$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},

function() {
//hide heading and caption
//$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-110},{duration:200, easing: style});
}
);
});

</script>

html代码：

</div>