jquery滑动图片显示标题遮罩层

收藏

本文演示了图片列表中，鼠标悬浮标题会以动画效果弹出，鼠标离开后，又会立即隐藏。这样的效果我们通常叫遮罩层滑动。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

图片和遮罩层html代码

<div class='thumbnailWrapper'>
    <ul>
        <li> 
            <a href='http://www.erdangjiade.com/js/587.html' target='_blank'> <img src='images/1.jpg' alt='jQuery8种不同的懒加载loading效果' /> </a>
            <div class='caption'>
                <p class='captionInside'>jQuery8种不同的懒加载loading效果</p>
            </div>
        </li>
        <li> 
            <a href='http://www.erdangjiade.com/js/588.html' target='_blank'> <img src='images/2.jpg' alt='鼠标悬浮图片背景变黑白的Masonry瀑布流插件' /> </a>
            <div class='caption'>
                <p class='captionInside'>鼠标悬浮图片背景变黑白的Masonry瀑布流插件</p>
            </div>
        </li>
    </ul>
</div>

//当鼠标悬浮在图片...
$('.thumbnailWrapper ul li').hover(function() {
    $(this).find('img').stop().animate({
        /* increase the image width for the zoom effect*/
        width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
        /* we need to change the left and top position in order to 
         have the zoom effect, so we are moving them to a negative
         position of the half of the imgIncrease */
        left: thumbnail.imgIncrease / 2 * (-1),
        top: thumbnail.imgIncrease / 2 * (-1)
    }, {
        "duration": thumbnail.effectDuration,
        "queue": false
    });
    //show the caption using slideDown event
    $(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
}, function() { //鼠标离开
    //find the image and animate it...
    $(this).find('img').animate({
        /* get it back to original size (zoom out) */
        width: thumbnail.imgWidth,
        /* get left and top positions back to normal */
        left: 0,
        top: 0

    }, thumbnail.effectDuration);
    //hide the caption using slideUp event
    $(this).find('.caption').slideUp(thumbnail.effectDuration);
});