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

Cập nhật lần cuối vào

Đ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 đó.

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

Đầ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:

Theo dõi
Thông báo của
guest

0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận