Плавный переход между фотографиями

Разработаем модуль, который позволит легко переключаться между двумя фотографиями. Модуль переключения между фотографиями позволит быстро и красиво показать разницу в фото до обработки и после, делая акцент на разнице видов.

Конечный результат (просто двигайте мышью над фото с правого края до левого):

Задача: написать код jQuery переключалки между фотографиями. Определим структуру HTML:

1
2
3
4
	<div class="togglepic">
		<div class="tgp1"><img src="images/1.jpg"></div>
		<div class="tgp2"><img src="images/2.jpg"></div>
	</div>
Итак, главный блок класс .togglepic содержит два блока, внутри которых находятся изображения.

Добавим CSS

Рассмотрим стили CSS для блока .togglepic:

1
2
3
4
5
6
7
8
9
.togglepic {
	width: 445px;
	height: 670px;
	border: 15px solid #c0c0c0;
	box-shadow: 4px 4px 4px #f0f0f0;
	position: relative;
	overflow: hidden;
	cursor:move;
}
Как видно, я жестко задал ширину и высоту блока, хотя в последующем необходимо сделать это автоматически. Также я задал границу и тень. Из главных свойств — свойство position: relative — это позволит позиционировать внутренние блоки относительно текущего и overflow:hidden — скрытие изображения, которое вылазит за пределы блока.

Рассмотрим код CSS вложенных в блок .togglepic блоков:

1
2
3
4
5
6
.togglepic div {
	position: absolute;
	left:0;
	top:0;
	overflow: hidden;
}
Вложенные блоки позиционируем абсолютно и ставим их один под другим. Все, что вылазит за пределы блоков — скрываем. Теперь зададим, чтобы блок .tgp1 располагался над блоком .tgp2 и закрывал его.
1
2
3
4
5
6
.tgp1 {
	z-index:10;
}
.tgp2 {
	z-index:2;
}
Все, оформление готово. Теперь перейдем к написанию jQuery кода.

Пишем jQuery код переключателя изображений

Что должен делать код переключателя:

  1. дождаться загрузки страницы (ready)
  2. отслеживать движение мышью над блоком .togglepic (mousemove)
  3. определять координату X мыши относительно родителя это и будет ширина верхнего блока
  4. изменять ширину блока .tgp1, тем самым открывая блок .tgp2
  5. делать все это кроссбраузерно.
Приступаем: подключим в HTML jQuery и файл, где будет располагаться код. Напишем следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
	// событие движение мышью
	$('.togglepic').mousemove(function(e){
	//чтобы событие работа в firefox
		 e = e || event;
		// ищем первый блок внутри элемента и изменяем его ширину
		$(this).find('.tgp1').css({
		//определяем координату мыши относительно родителя
			'width': e.offsetX +'px'
		});
	});
})

Собираем все вместе и наслаждаемся результатом.

Обратите внимание, что данный код позволяет использовать несколько блоков .togglepic на странице. Все работает корректно!

Что исправить и улучшить в коде

  • добавить автоматическую подгонку блока .togglepic под размеры изображений
  • если мышку убрать вертикально не изменяя координаты X, то изображение остается разделенным, необходимо его вернуть в первоначальный вид

Домашнее задание

Задание 1. Добавить автоматическую подгонку блока .togglepic под размеры вложенных изображений

Задание 2. Добавить функцию, которая при уводе мыши за пределы блока .togglepic будет возвращать изображениям первоначальный вид.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *