最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery奇妙的图片遮罩层效果

来源:http://www.erdangjiade.com/ 沐浴春风 2016-08-02 07:16浏览(1608)

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

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

jQuery奇妙的图片遮罩层效果
分类:图片代码 > 遮罩层 难易:中级
查看演示

加我微信,拉你进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}); // 执行对应边界 进入/离开 的方法

    });
});
标签: 图片遮罩层
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/919.html
评论3
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 板凳
    03-01 19:13
    康康kkk
    挺喜欢真好,,,,,,,,,,
  • 头像 椅子
    09-13 11:36
    YangDragon
    真和阿噢看
  • 头像 沙发
    09-13 11:33
    YangDragon
    你哈哈真好看
1 2