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

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:

Không có bình luận.

Bạn có thể trở thành người đầu tiên để lại bình luận.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *