如何使用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);
});