Javascript特效之感知方向遮罩
程序员文章站
2022-05-28 19:37:40
...
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!!!
有兴趣的同学可以找我要例子代码。
---来源站长素材如有侵权敬请告知删除!
下一篇: WPF实现背景灯光随鼠标闪动效果