Hiệu ứng hover di chuyển theo chuột jQuery

Đoạn code bên dưới sẽ giúp bạn làm icon hover di chuyển theo chuột. Icon hover này sẽ di chuyển theo dạng chữ thập. Khi bạn rê chuột sang bên nào thì icon sẽ hover sang hướng đó.

Đầu tiên sẽ là đoạn code jQuery phát hiện hướng đi của chuột, sau đó làm cho icon chạy theo chuột.

jQuery(document).ready(function ($) {
    $('.general_pic_hover').each(function () {
        var element = $(this),
            overlay = element.find('.hover');

        if (!element.hasClass('initialized')) {
            if (!overlay.length) {
                element.append('<span class="hover"><span class="icon"></span></span>');
            }

            element.addClass('initialized');
        }

        var no_fx = element.hasClass('no_fx');

        element.on('mouseenter', function (e) {
            var icon = element.find('.icon');

            if (no_fx) {
                overlay.css('display', 'block');
            } else {
                overlay.show();

                var w = $(this).width();
                var h = $(this).height();
                var x = (e.pageX - $(this).offset().left - (w / 2)) * ( w > h ? (h / w) : 1 );
                var y = (e.pageY - $(this).offset().top - (h / 2)) * ( h > w ? (w / h) : 1 );
                var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3) % 4;

                switch (direction) {
                    case 0:
                        icon.css({
                            'left': '0px',
                            'top': '-100%',
                            'right': 'auto',
                            'bottom': 'auto'
                        });

                        icon.stop(true).delay(300).animate({
                            top: 0
                        }, 300);

                        break;
                    case 1:
                        icon.css({
                            'left': '100%',
                            'top': '0',
                            'right': 'auto',
                            'bottom': 'auto'
                        });

                        icon.stop(true).delay(300).animate({
                            left: 0
                        }, 300);

                        break;
                    case 2:
                        icon.css({
                            'left': '0px',
                            'top': 'auto',
                            'right': 'auto',
                            'bottom': '-100%'
                        });

                        icon.stop(true).delay(300).animate({
                            bottom: 0
                        }, 300);

                        break;
                    case 3:
                        icon.css({
                            'left': 'auto',
                            'top': '0',
                            'right': '100%',
                            'bottom': 'auto'
                        });

                        icon.stop(true).delay(300).animate({
                            right: 0
                        }, 300);

                        break;
                }
            }
        });

        element.on('mouseleave', function (e) {
            var icon = $(this).find('.icon');

            if (no_fx) {
                overlay.css('display', 'none');
            } else {
                var w = $(this).width();
                var h = $(this).height();
                var x = (e.pageX - $(this).offset().left - (w / 2)) * ( w > h ? (h / w) : 1 );
                var y = (e.pageY - $(this).offset().top - (h / 2)) * ( h > w ? (w / h) : 1 );
                var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3) % 4;

                switch (direction) {
                    case 0:
                        icon.css({
                            'left': '0px',
                            'top': '0px',
                            'right': 'auto',
                            'bottom': 'auto'
                        });

                        icon.stop(true).animate({
                            top: -h
                        }, 300, function () {
                            overlay.hide()
                        });

                        break;
                    case 1:
                        icon.css({
                            'left': 'auto',
                            'top': '0px',
                            'right': '0px',
                            'bottom': 'auto'
                        });

                        icon.stop(true).animate({
                            right: -w
                        }, 300, function () {
                            overlay.hide()
                        });

                        break;
                    case 2:
                        icon.css({
                            'left': '0px',
                            'top': 'auto',
                            'right': 'auto',
                            'bottom': '0px'
                        });

                        icon.stop(true).animate({
                            bottom: -h
                        }, 300, function () {
                            overlay.hide()
                        });

                        break;
                    case 3:
                        icon.css({
                            'left': '0px',
                            'top': '0px',
                            'right': 'auto',
                            'bottom': 'auto'
                        });

                        icon.stop(true).animate({
                            left: -w
                        }, 300, function () {
                            overlay.hide()
                        });

                        break;
                }
            }
        });

    });
});

CSS thì bạn để position absolute cho phù hợp nhé.

.general_pic_hover {
    position: relative;
}

.general_pic_hover .hover {
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/bg_hover_1.png);
    cursor: pointer;
    z-index: 499;
}

.general_pic_hover .icon {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    z-index: 499;
}

Kết quả các bạn sẽ thấy icon di chuyển theo hướng đi của chuột như video bên dưới: