Максимум-минимум

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

Задача стояла простая, есть два элемента: внешний который задает область и внутренний, обозначающий предмет. При клике на внешнем надо было ставить внутренний центром в место клика, если клик был слишком близко к краю внешнего элемента — внутренний должен стать вплотную к краю, а не выйти краем за пределы внешнего.

Вот живая демонстрация, только тут для наглядности добавлен еще один элемент он отмечает область в которой внутренний элемент будет «прилипать» к краю внешнего.

Не смотря на то что там всего пара строчек кода, их написание заняло у меня очень много времени(((


jQuery(function ($) {

	$("#outer").mousedown(function (e) {
		var elt = $("#inner"),
			self = $(this),
			top = Math.min(Math.max(0, e.pageY - self.offset().top - elt.height() / 2), self.height() - elt.height()),
			left = Math.min(Math.max(0, e.pageX - self.offset().left - elt.width() / 2), self.width() - elt.width());
		elt.css({top: top, left: left});
	});

});

Разберу самую интересную строчку


Math.min(Math.max(0, e.pageY - self.offset().top - elt.height() / 2), self.height() - elt.height());

Её можно расписать как


var
// относительная координата нажатия
pointY = e.pageY - self.offset().top,
// верхний отступ
// если половина высоты внутреннего больше 
// расстояния от края до клика, то берем 0,
// иначе берем точку клика минус половину высоты
max = Math.max(0, pointY - elt.height() / 2),
// нижний отступ
// если высота внешнего элемента минус высота внутреннего
// меньше точки клика, то берем ее, иначе точку клика
top = Math.min(max, self.height() - elt.height());

Можно еще переписать на ифах, но так вообще не красиво


var pointY = e.pageY - self.offset().top,
top = 0;

if(top < pointY - elt.height() / 2)
	top = pointY - elt.height() / 2;

if(top > self.height() - elt.height())
	top = self.height() - elt.height();

Все тоже самое действительно и для координат по оси X

14 Комментарии “Максимум-минимум

  1. Вроде прикольно….но где можно такую штуку применить??? даж не знаю…
    Никогда ещё не сталкивался с jQuery

  2. омг! jQuery это библиотека написанная на языке javascript а java это совершенно другой язык.

  3. не понял ответ….хотя вопрос был нубский….но всё же….что есть такого в jQuery, чего нельзя сделать на php и яве?:)

  4. в двух словах php и java работают на сервере (кроме апплетов) а javascript работает у тебя в браузере

  5. небольшая практика общения с javascript у меня есть….но шоб до jQuery добраться….точно не хватит…поизучаю на досуге….прикольно было бы практический примерчик, шоб аш захотелось изучить:)

  6. Ух ты круто…а тогда встречный вопрос…чем от ajax отличается??
    ибо ajax тоже написан на javascript, и впринципе идея та же….или это и есть ajax?

  7. EnShTeIn, не лохмать бабушку! ajax это технология, технология основанная на языке javascript. Я не против отвечать на вопросы по теме. Но переписывать тут элементарные вещи не хочу, потому что мне просто жалко своего времени. Почитай плз про это хотя бы на википедии.

Комментарии закрыты