jQuery从天而降的背景标题遮罩层

来源:https://www.sucaihuo.com/js/929.html 2016-08-08 06:35浏览(1099) 收藏

当鼠标悬浮在每一个图片上,标题背景图从上而下以动画方式显示。鼠标离开后,标题浮动层消失。这款动画遮罩层js代码很简单。
jQuery从天而降的背景标题遮罩层
分类:图片代码 > 背景图 难易:初级
查看演示 下载资源 下载积分: 20 积分
<ul class="artist">
    <li class="a1"><a href="http://www.sucaihuo.com/"><img width="230" height="354" src="images/sucaihuo.jpg" alt="张学友" /></a></li>
    <li class="a2">
        <img width="232" height="232" src="images/1.jpg" />
        <a class="cover" href="http://www.sucaihuo.com/"><strong>张震岳</strong><br /><span>即将有5场演出</span><br />查看详情</a>
    </li>
    <li class="a3">
        <img width="110" height="110" src="images/2.jpg" />
        <a class="cover" href="http://www.sucaihuo.com/"><strong>蔡琴</strong><br /><span>即将有5场演出</span><br />查看详情</a>
    </li>
    <li class="a4">
        <img width="110" height="110" src="images/3.jpg" />
        <a class="cover" href="http://www.sucaihuo.com/"><strong>郑钧</strong><br /><span>即将有2场演出</span><br />查看详情</a>
    </li>
</ul>
$('.artist li').each(function() {
    $(this).find('.cover').css('top', -$(this).height());
    $(this).hover(function() {
        $(this).find('.cover').animate({
            'top': '0'
        }, 300);
    }, function() {
        $(this).find('.cover').animate({
            'top': $(this).height()
        }, {
            duration: 300,
            complete: function() {
                $(this).css('top', -$(this).parent('li').height())
            }
        });
    });
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2