3DM-студия
» » » Интересный эффект всплытия картинок при наведении а уменьшенную копию

Интересный эффект всплытия картинок при наведении а уменьшенную копию

Интересный эффект всплытия картинок при наведении а уменьшенную копию


Интересный эффект всплытия картинок при наведении а уменьшенную копию на основе html5 атрибута data-*. Собственно про новый (кому как) атрибут data-* я рассказывать не собираюсь, информации полным полно в сети. А вот про скрипткик, демо которого можно наблюдать чуть ниже, расскажу немного.

Как видно из демонстрации, при маленьком размере окна браузера (в разумных пределах) картинка, всплывающая при наведении на миниатюру, появляется слева от курсора, если не помещается справа.
Достигнут подобный результат довольно просто.
Первое, что делает скрипт - определяет положение, которое займёт всплывалка на странице
 function getXY(e) { //Определяем положение всплывалки на странице
	if($(window).width() - (offset *2) >= $("#preview").width() + e.pageX){
		left_pos = e.pageX+offset;
		} else {
		left_pos = e.pageX-$("#preview").width()-offset;
		}				
	top_pos = e.pageY - ($("#preview").height() / 2);	
	return {left: left_pos, top: top_pos};
}

Далее в конец body добавляем пустой див c нужным нам ID с помощью нехитрой конструкции
 $("body").append("<p id='preview'><img src='"+ $(this).data("image") +"' alt='"+$(this).attr("alt")+"' /></p>"); //Добавляем блок в конец body - именно в него будет "вставляться" наша картинка, для выбора картинки используем html5 атрибут data-
				pos = getXY(e);

в этот пустой див и будут попадать картинки, ссылки на которые мы укажем в специально заведённом атрибуте data-image.
Но т.к. картинка должна показываться только при наведении курсора на миниатюру - заворачиваем код в .hover() добавляем слежение за позицией курсора через событие .mousemove()
f
unction imagePreview(targets){
	offset = 15;
	var left_pos;

	$(targets).hover(function(e){
		$("body").append("<p id='preview'><img src='"+ $(this).data("image") +"' alt='"+$(this).attr("alt")+"' /></p>"); //Добавляем блок в конец body - именно в него будет "вставляться" наша картинка, для выбора картинки используем html5 атрибут data-
		pos = getXY(e);				
		
		$("#preview").css({left:pos.left, top:pos.top}); 
		
		$("#preview").fadeIn();				
	},
	function(){	
		$("#preview").remove();
	});

	$(targets).mousemove(function(e){
		pos = getXY(e);				
		$("#preview").css({left:pos.left, top:pos.top});
	});
}

Осталось только проинициализировать наши функции и всё, скрипт готов к бою.
$(document).ready(function(){ //Инициализация скри

Автор: ПафНутиЙ


Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...