如何获得动画字幕覆盖与javascript

Question

我有一张图片，我想把它做成这样，当你把鼠标放在图片上时，它的一部分会出现一个黑色的标题，就像这里所示的:

http://wonderwall.msn.com/

Answer 1

这应该可以让你开始:

http://jsfiddle.net/AlienWebguy/cGQZh/

HTML:

<div class="img_wrapper">
    <img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" width="350" height="350" />
    <div class="img_caption">
        This is a flower
    </div>
</div>

JQuery:

$(function(){
    $('.img_wrapper').mouseover(function(){
        $(this).children('.img_caption').animate({
            top:'-50px'
        },300);
    });
    $('.img_wrapper').mouseout(function(){
        $(this).children('.img_caption').animate({
            top:'0px'
        },300);
    });
});

CSS:

.img_wrapper {
    width:350px;
    height:350px;
    overflow:hidden;
    position:relative;
}
.img_caption {
    height:50px;
    width:100%;
    text-align:center;
    opacity:0.7;
    color:#FFF;
    background-color:#000;
    font-weight:bold;
    position:relative;
    z-index:2;
}

Answer 2

如果您正在使用jQuery库

请尝试此操作

$("imageSelector").append("div", {position:"relative", display:"none"})
.html("The content which you want to show in the div on mouseover")
.mouseover(function(){
   $(this).find("div").animate({ top: -1*$(this).height() }, 500);
})
.mouseout(function(){
   $(this).find("div").animate({ top: 0 }, 500);
});