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'});
        }
    }
});