Javascript特效之感知方向遮罩

Javascript特效之感知方向遮罩

先看看效果图：

效果是鼠标移到每一张图就自动弹出一个div层显示具体信息。

先说说我的思路：为每一张图添加一个鼠标移上去的事件，后再为当前鼠标移上去的层加上移入div信息层的效果，鼠标移开即回复原始状态。

这里发现每一张图鼠标从哪个方向移入则鼠标移出时会往那个方向移回去。

来看看代码实现：

(function(b) {
    b.fn.extend({
        "mouseMove": function(c) {
            $this = b(this);
            $this.hover(function(k) {
                var u = b(this).find(c);
                var p = k.clientX;
                var n = k.clientY;
                var s = parseInt(b(this).offset().top);
                var o = parseInt(s + b(this).height());
                var g = parseInt(b(this).offset().left);
                var d = parseInt(g + b(this).width());
                var m = Math.abs(n - s);
                var j = Math.abs(n - o);
                var i = Math.abs(p - g);
                var f = Math.abs(p - d);
                var h = Math.min(m, j, i, f);
                var q = k.type;
                switch (h) {
                case m:
                    a("top", q, u);
                    break;
                case j:
                    a("bottom", q, u);
                    break;
                case i:
                    a("left", q, u);
                    break;
                case f:
                    a("right", q, u)
                }
            })
        }
    });
    function a(c, d, f) {
        var e = 300;
        if (c == "top") {
            if (d == "mouseenter") {
                b(b(f)[0]).stop(true, true);
                b(b(f)[0]).css({
                    display: "block",
                    top: "-100%",
                    left: "0"
                }).animate({
                    top: 0,
                    left: 0
                },
                e)
            } else {
                b(b(f)[0]).animate({
                    display: "block",
                    top: "-100%",
                    left: "0"
                },
                e)
            }
        }
        if (c == "left") {
            if (d == "mouseenter") {
                b(b(f)[0]).stop(true, true);
                b(b(f)[0]).css({
                    display: "block",
                    top: "0",
                    left: "-100%"
                }).animate({
                    left: 0,
                    top: 0
                },
                e)
            } else {
                b(b(f)[0]).animate({
                    display: "block",
                    left: "-100%"
                },
                e)
            }
        }
        if (c == "bottom") {
            if (d == "mouseenter") {
                b(b(f)[0]).stop(true, true);
                b(b(f)[0]).css({
                    display: "block",
                    top: "100%",
                    left: "0"
                }).animate({
                    top: 0,
                    left: 0
                },
                e)
            } else {
                b(b(f)[0]).animate({
                    display: "block",
                    top: "100%",
                    left: "0"
                },
                e)
            }
        }
        if (c == "right") {
            if (d == "mouseenter") {
                b(b(f)[0]).stop(true, true);
                b(b(f)[0]).css({
                    display: "block",
                    top: 0,
                    left: "100%"
                }).animate({
                    left: "0%",
                    top: 0
                },
                e)
            } else {
                b(b(f)[0]).animate({
                    display: "block",
                    left: "100%"
                },
                e)
            }
        }
    }
})(window.jQuery);

他这里根据鼠标移入的坐标来计算出div层从哪个位置移入，新技能！get！！！

有兴趣的同学可以找我要例子代码。

---来源站长素材如有侵权敬请告知删除！