<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.li {
width: 200px;
height: 200px;
background: #00C475;
border-radius: 10px;
margin: 10px auto;
position: relative;
overflow: hidden;
margin: 50px;
}
.li article {
width: 100%;
height: 100%;
position: absolute;
background: red;
z-index: 1;
}
</style>
</head>
<body>
<div class="li">
<article>1</article>
</div>
<div class="li">
<article>2</article>
</div>
<div class="li">
<article>3</article>
</div>
<div class="li">
<article>4</article>
</div>
<div class="li">
<article>5</article>
</div>
<div class="li">
<article>6</article>
</div>
<div class="li">
<article>7</article>
</div>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
(function ($) {
"use strict"
var Str = {
tmhover: null,
hoverDelay: 0,
reverse: false,
obj:{},
init: async function (options) {
await this.onStyle();
Str.obj = options;
this.onEvent(Str.obj.id);
},
getDir: function (jQueryel, coordinates) {
var w = jQueryel.width(),
h = jQueryel.height(),
x = (coordinates.x - jQueryel.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
y = (coordinates.y - jQueryel.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
return direction;
},
getClasses: function (direction) {
var fromClass, toClass;
switch (direction) {
case 0:
(!Str.reverse) ? fromClass = 'da-slideFromTop' : fromClass = 'da-slideFromBottom';
toClass = 'da-slideTop';
break;
case 1:
(!Str.reverse) ? fromClass = 'da-slideFromRight' : fromClass = 'da-slideFromLeft';
toClass = 'da-slideLeft';
break;
case 2:
(!Str.reverse) ? fromClass = 'da-slideFromBottom' : fromClass = 'da-slideFromTop';
toClass = 'da-slideTop';
break;
case 3:
(!Str.reverse) ? fromClass = 'da-slideFromLeft' : fromClass = 'da-slideFromRight';
toClass = 'da-slideLeft';
break;
};
return { from: fromClass, to: toClass };
},
onEvent: function (element) {
$(element).on('mouseenter.hoverdir, mouseleave.hoverdir', function (event) {
var jQueryel = $(this),
evType = event.type,
jQueryhoverElem = jQueryel.find(Str.obj.dom),
direction = Str.getDir(jQueryel, { x: event.pageX, y: event.pageY }),
hoverClasses = Str.getClasses(direction);
jQueryhoverElem.removeClass();
if (evType === 'mouseenter') {
jQueryhoverElem.hide().addClass(hoverClasses.from);
clearTimeout(Str.tmhover);
Str.tmhover = setTimeout(function () {
jQueryhoverElem.show(0, function () {
jQuery(this).addClass('da-animate').addClass(hoverClasses.to);
});
}, Str.hoverDelay);
}
else {
jQueryhoverElem.addClass('da-animate');
clearTimeout(Str.tmhover);
jQueryhoverElem.addClass(hoverClasses.from);
}
});
},
onStyle: function () {
var html =
`<style>
.da-slideFromTop {
left: 0px;
top: -100%;
}
.da-slideFromBottom {
left: 0px;
top: 100%;
}
.da-slideFromLeft {
top: 0px;
left: -100%;
}
.da-slideFromRight {
top: 0px;
left: 100%;
}
.da-slideTop {
top: 0px;
}
.da-slideLeft {
left: 0px;
}
.da-animate {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
</style>`;
document.head.insertAdjacentHTML('beforeend', html);
}
};
$.fn.onInit = function (element) {
let ele = element;
$(element.dom).addClass('da-slideFromRight');
Str.init(element);
}
})(jQuery);
jQuery().onInit({
'id':'.li',
'dom':'article'
});
</script>
</html>
js 实现遮罩层随鼠标移动的方向移入而移出
转载请注明出处或者链接地址：https://www.qianduange.cn//article/2582.html
发布的文章
基于 HTML5 WebGL 的太阳系 3D 展示系统
2024-03-09 09:03:15
uniapp h5跳转微信小程序（wx-open-launch-weapp）
2024-03-09 09:03:06
H5调用摄像头扫码识别（html5-qrcode）
2024-03-09 09:03:02
三种利用python将html文件转图片的方式
2024-03-09 09:03:01
程序员的中秋节
2024-03-09 09:03:01
jquery html特殊字符反转义,JS - 实现HTML标签的转义、反转义的几种方法
2024-03-09 09:03:00
2024三掌柜赠书活动第十二期：Nuxt.js Web开发实战
2024-03-09 09:03:22
华为OD机试 - 堆内存申请（Java & JS & Python & C & C ）
2024-03-09 09:03:22
Node.js安装及环境配置（简单易懂全面！）
2024-03-09 09:03:03
js中几种追加元素的方法
2024-03-08 10:03:38
大家推荐的文章