js 实现遮罩层随鼠标移动的方向移入而移出

 <!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 实现遮罩层随鼠标移动的方向移入而移出

三种利用python将html文件转图片的方式

jquery html特殊字符反转义,JS - 实现HTML标签的转义、反转义的几种方法

2024三掌柜赠书活动第十二期：Nuxt.js Web开发实战

华为OD机试 - 堆内存申请（Java & JS & Python & C & C ）

Node.js安装及环境配置（简单易懂全面！）

js中几种追加元素的方法

前端jQuery的jQuery 插件库的插件（使用方法）

jQuery中的事件与DOM操作

解决Referrer Policy: strict-origin-when-cross-origin

jQuery的使用

前端哥

基于 HTML5 WebGL 的太阳系 3D 展示系统

uniapp h5跳转微信小程序（wx-open-launch-weapp）

H5调用摄像头扫码识别（html5-qrcode）

三种利用python将html文件转图片的方式

程序员的中秋节

jquery html特殊字符反转义,JS - 实现HTML标签的转义、反转义的几种方法

2024三掌柜赠书活动第十二期：Nuxt.js Web开发实战

华为OD机试 - 堆内存申请（Java & JS & Python & C & C ）

Node.js安装及环境配置（简单易懂全面！）

js中几种追加元素的方法

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

2
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

3
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

4
移动端css布局大全

2024-02-06 15:02:421000

5
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

6
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

7
成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

8
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

9
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

10
尚硅谷css3笔记

2024-02-13 10:02:44998

	<!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 实现遮罩层随鼠标移动的方向移入而移出

微信扫一扫：分享