jQuery缩略图遮罩层

收藏

本文的图片遮罩层是仿照百度的图片效果，当鼠标悬浮在某个遮罩层的时候，阴影层就停留在当前图片，遮罩层会一直随着鼠标移动。

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

查看演示

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

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

遮罩层样式

.mask{width:100%;height:100%;background:#000;position: absolute;display: none;opacity:0.5;}

图片和遮罩层结构

<div class="page_container"> 
    <div class="container"> 
        <img src="erdangjiade.jpg" width="220" height="210" alt="http://www.erdangjiade.com" /> 
        <div class="mask"></div> 
    </div> 
    <div class="container"> 
        <img src="erdangjiade.jpg" width="220" height="210" alt="" /> 
        <div class="mask"></div> 
    </div> 
</div>

鼠标悬浮和离开图片事件

$(".container").bind("mouseenter mouseleave", function(e) { 
    var w = $(this).width(); 
    var h = $(this).height(); 
    var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); 
    var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); 
    //alert(x); 
    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 
    //direction的值为“0,1,2,3”分别对应着“上，右，下，左” 
    var eventType = e.type; 
    //alert(e.type); 
    if (e.type == 'mouseenter') { 
        if (direction == 0) { 
            $(this).find('.mask').css({'display': 'block', 'top': -h + 'px', 'left': '0px'}).animate({'top': '0px'}); 
        } else if (direction == 1) { 
            $(this).find('.mask').css({'display': 'block', 'left': w + 'px', 'top': '0px'}).animate({'left': '0px'}); 
        } else if (direction == 2) { 
            $(this).find('.mask').css({'display': 'block', 'top': h + 'px', 'left': '0px'}).animate({'top': '0px'}); 
        } else if (direction == 3) { 
            $(this).find('.mask').css({'display': 'block', 'left': -w + 'px', 'top': '0px'}).animate({'left': '0px'}); 
        } 
    } else { 
        if (direction == 0) { 
            $(this).find('.mask').animate({'top': -h + 'px'}); 
        } else if (direction == 1) { 
            $(this).find('.mask').animate({'left': w + 'px'}); 
        } else if (direction == 2) { 
            $(this).find('.mask').animate({'top': h + 'px'}); 
        } else if (direction == 3) { 
            $(this).find('.mask').animate({'left': -w + 'px'}); 
        } 
    } 
});