鼠标移动上去,图片向下移动,显示出背后的内容

发布时间:2016-03-21 浏览次数:2502 文章来源:个人博客

html页面:

<div class="wrap1">
            <div class="cover imgcrd">
                <img src="{res file=images/ggt.png}" />
            </div>
            <div class="itemlist">
                <img src="{res file=images/ILOVEYOU.jpg}" />
            </div>
</div>


css :


.wrap1{
    position:relative;
    overflow: hidden;
    height:313px;
}
.cover{
    position:absolute;
    z-index:20;
    width:278px;
    height:313px;
}
.itemlist{
    position:absolute;
    width:278px;
    height:313px;
}


js:

$(function() {
    $('.wrap1').mouseenter(function() {
        $(this).children('.cover').animate({
            top: '50px'
        },"slow")
    }).mouseleave(function() {
        $(this).children('.cover').stop().animate({
            top: '0px'
        },"slow")
    })
})


key-word
图片下浮 图片下移