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

2024-01-03 18:55:47
<!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>

文章来源:https://blog.csdn.net/weixin_45791806/article/details/135369390
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。