文章标题

来源：互联网发布：eos utility mac 编辑：程序博客网时间：2024/06/05 10:31
<style>    body {        margin: 0px;        padding: 0px    }    ul {        margin: 0px;        padding: 0px;        list-style: none;    }    .cont {        float: left;        margin: 10px;        position: relative;        left: 0px;        top: 0px;        width: 200px;        height: 500px;        overflow: hidden;    }    .cont img{        width: 100%;        height: 100%;    }    .wrap {        position: absolute;        left: 0px;        bottom: -200px;        background: #000000;        opacity: .5;        width: 200px;        height: 300px;    }</style><script>    $(function () {        /*总结：优先推荐使用方法2*/        /*方法一：使用mouseover和mouseover两个事件实现*/        /*   $(".cont").mouseover(function() {         $(this).children('.wrap').stop(true).animate({bottom:"0px",},500);         });/!* , function() {         $(this).children('.wrap').stop(true).animate({bottom:"-138px",},500);         }) *!/         $(".cont").mouseout(function() {         $(this).children('.wrap').stop(true).animate({bottom:"-200px",},500)         });*/        /*方法二：使用hover一个事件实现*/        $(".cont").hover(function () {            $(this).children('.wrap').stop(true).animate({bottom: "0px",}, 500);        }, function () {            $(this).children('.wrap').stop(true).animate({bottom: "-138px",}, 500);        });    });</script>
0 0