На моем сайте у меня есть визитные карточки на фотографиях пользователей. У меня две проблемы.Есть ли лучший способ для визитных карточек?
Первый вопрос, который я имею, что это не работает, что хорошо с точки зрения отображения и скрытия при перемещении мыши или выключения профиля изображения. Когда вы быстро перемещаете указатель мыши над изображением (например, если вы просто перемещаете указатель мыши по странице) примерно через секунду, он все же появляется. Я не понимаю, почему, хотя это делает это, хотя. Только после 1000 миллисекунд зависания должна появиться карта.
Вторая проблема, с которой я сталкиваюсь, заключается в том, что если вы нависаете над одним изображением, и вы переходите к другому изображению (например, к тому, что находится прямо над ним), прежде чем другой закроется, он просто не будет работать, пока вы не перейдете выведите мышь с картинки, а затем переместите ее обратно.
Мне интересно, есть ли лучший способ делать события mouseenter и mouseleave, чем то, как я делаю это прямо сейчас.
Вот мой JavaScript для парения карты:
var timeout, timeout2, hovercard_request;
$('.profile-hovercard').live('mouseenter',function() {
if(!$('#hovercard').hasClass('open')) {
var id = $(this).attr('data-id'),
pos = $(this).offset(),
width = $(this).outerWidth(),
miniprofile_url = $(this).parent().attr('href') + '/mini_profile';
timeout = setTimeout(function() {
//$('#hovercard').remove();
if ($('#hovercard').length <= 0) {
var hc = '<div id="hovercard" class="open"> \
<div class="hovercard-loading"><img src="/assets/img/ProgressIndicator.gif" /></div> \
</div>';
$('body').append(hc);
$('#hovercard').css({
'position': 'absolute',
'top': pos.top + "px",
'left': (pos.left + width + 11) + "px"
});
}
else {
$('#hovercard').css({
'position': 'absolute',
'top': pos.top + "px",
'left': (pos.left + width + 11) + "px"
}).html('<div class="hovercard-loading"><img src="/assets/img/ProgressIndicator.gif" /></div>').show().addClass('open');
}
$.get(miniprofile_url, {}, function(data) {
$('#hovercard').html('<div class="hovercard-inner"> \
<div class="hovercard-pic"> \
<a href="'+data.url+'"><img src="' + data.img_path + '" alt="' + data.name + '" /></a> \
</div> \
<div class="hovercard-details"> \
<h3><a href="'+data.url+'">' + data.name + (data.you == 1 ? ' <span style="font-weight:normal">(you)</span>' : '') + '</a> ' + (data.is_online ? '<span class="online-user-icon m" title="'+data.name+' is online."></span>' : '') + '</h3> \
<div class="hovercard-stats"> \
<strong class="points">' + data.points + ' point' + (data.points == 1 ? '' : 's') + '</strong><br /> \
<strong>' + data.questions + '</strong> question' + (data.questions == 1 ? '' : 's') + '/<strong>' + data.answers + '</strong> answer' + (data.answers == 1 ? '' : 's') + '<!--/<strong>' + data.comments + '</strong> comment' + (data.comments == 1 ? '' : 's') + '--><br /> \
<span class="location">' + data.location + '</span> \
</div> \
</div> \
<div class="clear"></div> \
</div>');
if(data.bio !== '') {
$('#hovercard').append('<div class="hovercard-bio">' + data.bio + '</div>');
}
else {
$('#hovercard').append('<div class="hovercard-bio"><em>This user does not have a bio.</em></div>');
}
},'json').fail(function() {
$('#hovercard').html('<div class="hovercard-loading">The request has failed. Please try again later.</div>');
}).error(function() {
$('#hovercard').html('<div class="hovercard-loading">An error has occurred. Please try again later.</div>');
});
}, 1000);
} // end if
});
$('.profile-hovercard').live('mouseleave',function() {
clearTimeout(timeout);
//hovercard_request.abort();
timeout2 = setTimeout(function() {
$('#hovercard').hide().removeClass('open');
}, 400);
$('#hovercard').hover(function() {
clearTimeout(timeout2);
},function() {
timeout2 = setTimeout(function() {
$('#hovercard').hide().removeClass('open');
}, 300);
});
});
При наведении курсора на чью-то изображение, оно всплывает небольшое окно рядом с ним, показывая некоторые из их информации. В приведенном выше коде у меня есть все таймауты, потому что это единственный способ заставить карту оставаться открытой, чтобы кто-то мог перемещать мышь на карту без закрытия карты.
Почему ты реализации этого сами? Для этого уже существуют плагины, например. [HoverIntent] (http://cherne.net/brian/resources/jquery.hoverIntent.html). –
@ ŠimeVidas Ну, я действительно не знал о hoverIntent ... но это выглядит полезно. Но с hoverIntent я смогу сделать это там, где, когда вы переместите мышь на карту (с рисунка), она останется открытой? – Nathan
hoverIntent будет отвечать за показ карты. Скрывая карту, вы должны были бы реализовать себя. –