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