jQuery奇妙的图片遮罩层效果

收藏

鼠标悬浮在每一张图片时，阴影层会以动画方式显示出来。而且背景阴影层上方可输入标题或文字。更多图片遮罩层效果：http://www.erdangjiade.com/js/207.html

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

查看演示

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

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

// 修正FF浏览器兼容
function getOffset(e) {
    var target = e.target;
    if (target.offsetLeft == undefined) {
        target = target.parentNode;
    }
    var pageCoord = getPageCoord(target);
    var eventCoord = {
        x: window.pageXOffset + e.clientX,
        y: window.pageYOffset + e.clientY
    };
    var offset = {
        offsetX: eventCoord.x - pageCoord.x,
        offsetY: eventCoord.y - pageCoord.y
    };
    return offset;
}

function getPageCoord(element) {
    var coord = {
        x: 0,
        y: 0
    };
    while (element) {
        coord.x += element.offsetLeft;
        coord.y += element.offsetTop;
        element = element.offsetParent;
    }
    return coord;
}

$(document).ready(function() {

    $(".items .img").hover(function(e) {

        var _this = $(this), //闭包
                _desc = _this.find(".desc").stop(true),
                width = _this.width(), //取得元素宽
                height = _this.height(), //取得元素高
                left = (e.offsetX == undefined) ? getOffset(e).offsetX : e.offsetX, //从鼠标位置，得到左边界，利用修正ff兼容的方法
                top = (e.offsetY == undefined) ? getOffset(e).offsetY : e.offsetY, //得到上边界
                right = width - left, //计算出右边界
                bottom = height - top, //计算出下边界
                rect = {}, //坐标对象，用于执行对应方法。
                _min = Math.min(left, top, right, bottom), //得到最小值
                _out = e.type == "mouseleave", //是否是离开事件
                spos = {}; //起始位置

        rect[left] = function(epos) { //鼠从标左侧进入和离开事件
            spos = {"left": -width, "top": 0};
            if (_out) {
                _desc.animate(spos, "fast"); //从左侧离开
            } else {
                _desc.css(spos).animate(epos, "fast"); //从左侧进入
            }
        };

        rect[top] = function(epos) { //鼠从标上边界进入和离开事件
            spos = {"top": -height, "left": 0};
            if (_out) {
                _desc.animate(spos, "fast"); //从上面离开
            } else {
                _desc.css(spos).animate(epos, "fast"); //从上面进入
            }
        };

        rect[right] = function(epos) { //鼠从标右侧进入和离开事件
            spos = {"left": left, "top": 0};
            if (_out) {
                _desc.animate(spos, "fast"); //从右侧成离开
            } else {
                _desc.css(spos).animate(epos, "fast"); //从右侧进入
            }
        };

        rect[bottom] = function(epos) { //鼠从标下边界进入和离开事件
            spos = {"top": height, "left": 0};
            if (_out) {
                _desc.animate(spos, "fast"); //从底部离开
            } else {
                _desc.css(spos).animate(epos, "fast"); //从底部进入
            }
        };

        rect[_min]({"left": 0, "top": 0}); // 执行对应边界 进入/离开 的方法

    });
});