Новогодний JavaScript. Украшаем елочку.

Владимир | | CSS, HTML, JavaScript.

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

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

Возможный результат показан на скриншоте.

Демонстрационная страница с елочкой размещена здесь.

Исходные материалы: рисунки с елочкой (firtree.jpg) и шариками (ball1_1.gif, ball1_2.gif, …), библиотека prototype.

Идея очень простая. Посетитель щелкает мышкой по картинке с елочкой и в месте клика появляется шарик. Я нарисовал пять шариков разных цветов. Какой из них появиться определяет генератор случайных чисел. Естественно, это поведение вы можете изменить.

Посмотрите на разметку страницы.

<div id="content" onclick="addBall(event)"></div>

<p><img src="ball1_1.gif" style="display:none" alt="шарик"></img>
<img src="ball1_2.gif" style="display:none" alt="шарик"></img>
<img src="ball1_3.gif" style="display:none" alt="шарик"></img>
<img src="ball1_4.gif" style="display:none" alt="шарик"></img>
<img src="ball1_5.gif" style="display:none" alt="шарик"></img></p>

И таблицу стилей.

#content {
	margin: auto;
	border: solid 1px #ff0000;
	width: 277px;
	height: 316px;
	background-image: url('firtree.jpg');
}

Основную часть страницы занимает блок content. В качестве его фона установлена картинка с елочкой, а высота и ширина подогнаны точно под размеры этой картинки.

Кстати, обратите внимание на изображения шариков, которые вставлены после блока content. Эти шарики не отображаются браузером, т.к. для них установлено правило display:none. Невидимые картинки нам, конечно, не нужны, но этот прием позволяет устранить задержки при развешивании шариков.

Дело в том, что браузер загружает одну и туже картинку только один раз. Если эта картинка повторяется на странице (в нашем случае может быть несколько шариков одного цвета), то используется уже загруженное изображение.

Если мы уберем невидимые изображения шариков, то они будут загружаться после щелчка пользователя по елке, а это создаст задержку между щелчком и появлением шарика (особенно на dialup'е).

Теперь перейдем к добавлению шариков. В обработчике события onclick блока content мы вызываем функцию addBall(event) и передаем ей объект с параметрами события.

Посмотрите на ее исходный код:

var i = 0;
function addBall(e) {
	var n = Math.ceil(Math.random()*5);
	new Insertion.Bottom("content", "<img src=\"ball1_" + n + ".gif\" id=\"ball_" + i + "\" alt=\"шарик\"></img>");
	var mouseCoord = getMouseCoord(e);
	var ballLeft = mouseCoord[0] - 10;
	var ballTop = mouseCoord[1] - 10;
	Element.setStyle("ball_" + i, {top: ballTop + "px", left: ballLeft + "px"});
	i = i + 1;
}

Прежде всего, мы объявили глобальную переменную i. С ее помощью будем создавать уникальные идентификаторы (id) для каждого добавленного шарика. Они нам необходимы для того, чтобы задать размещение для каждого шарика отдельно.

Выбор шарика мы выполняем с помощью генератора случайных чисел (Math.random()). Т.к. он возвращает числа в диапазоне от 0 до 1, а у нас 5 шариков, умножаем результат на 5 и округляем до ближайшего большего целого числа (Math.ceil()).

Вставка шарика осуществляется с помощью функции Bottom объекта Insertion из библиотеки prototype. Использовать ее несложно. В первом параметре указываем id блока, в который нужно добавить html разметку, а во втором – указываем саму разметку (здесь мы вставили тег img с нужным шариком).

Теперь рассчитываем координаты левого верхнего угла картинки с шариком. Для этого определяем координаты курсора:

function getMouseCoord(e) {
	var IE = document.all?true:false;
	if (IE) { // определяем положение курсора в IE
	tempX = event.clientX + document.body.scrollLeft;
	tempY = event.clientY + document.body.scrollTop;
	}
	else {  // определяем положение курсора в NS
	tempX = e.pageX;
	tempY = e.pageY;
	}
	return [tempX, tempY];
}

Здесь ничего сложного, единственная заморочка заключается в том, что в IE координаты определяются не так как в Netscape, Mozilla.

От координат курсора отнимаем 10px (это половина длины и ширины изображения с шариком) и получаем координаты левого верхнего угла.

Для установки этих координат используем метод setStyle (строка 8). В его первом параметре указываем id элемента, а во втором – CSS правила.

В таблице стилей задаем для всех изображений абсолютное позиционирование.

img {
	position: absolute;
}

Вот и все. Можно наряжать елочку 🙂
Чтобы убрать шарики обновите страницу.

С Новым Годом!

P.S. Вы можете скачать архив с исходными файлами примера или посмотреть рабочую версию страницы.

Интересно почитать

Вместительные прицепы помогут вам сэкономить на количестве поездок.
С автомобилем audi вам не придется заботится о своем имидже.
Продажа подержанных автомобилей — удобный способ избавится от хлама.

  • tregub

    Спасибо.

  • tregub

    Спасибо.

  • Татьяна

    Подскажите пожалуйста, а как эту елочку сделать на форуме?
    Спасибо, с уважением, Татьяна

    • У меня вопрос: «Вы администратор форума или нет?»
      Если нет, то врядли вы сможете вставить JavaScript код для создания елочки.

      Если да, то вам нужно вставить приведенный в этой статье код на одну из страниц (или на все). Если на все, то лучше всего изменить шаблон форума и просто прописать в нем код. Еще вариант — попробовать использовать iframe. Мне сложно конкретно ответить, т.к. я не знаю о каком форуме речь.

  • Татьяна

    Подскажите пожалуйста, а как эту елочку сделать на форуме?
    Спасибо, с уважением, Татьяна

    • У меня вопрос: «Вы администратор форума или нет?»
      Если нет, то врядли вы сможете вставить JavaScript код для создания елочки.

      Если да, то вам нужно вставить приведенный в этой статье код на одну из страниц (или на все). Если на все, то лучше всего изменить шаблон форума и просто прописать в нем код. Еще вариант — попробовать использовать iframe. Мне сложно конкретно ответить, т.к. я не знаю о каком форуме речь.

  • Татьяна

    Я Администратор форума, его адрес:
    http://karapuzina.ucoz.ru/forum
    У нас там есть раздел Новый год/елка на форуме, но там елочка не очень удобная я бы хотела, чтобы форумчани могли наряжать ее автоматически. Мне очень понравилась идея этого форума: forum.0lik.ru/viewtopic.php?f=7&t=153 хотелось бы создать что-то подобное, но я к сожалению не разбираюсь в написании кодов.

  • Татьяна

    Я Администратор форума, его адрес:
    http://karapuzina.ucoz.ru/forum
    У нас там есть раздел Новый год/елка на форуме, но там елочка не очень удобная я бы хотела, чтобы форумчани могли наряжать ее автоматически. Мне очень понравилась идея этого форума: forum.0lik.ru/viewtopic.php?f=7&t=153 хотелось бы создать что-то подобное, но я к сожалению не разбираюсь в написании кодов.

  • Татьяна

    Извиняюсь! не правильно написала адрес форума-образца елочки: http://forum.n-sk.info/newyear2010.php

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

      Пример, который вы привели, требует поддержки со стороны сервера (возможность устанавливать свои php скрипты, а на ukoz'е их устанавливать нельзя) и нужна панель администратора, чтобы удалять лишние игрушки.

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

  • Татьяна

    Извиняюсь! не правильно написала адрес форума-образца елочки: http://forum.n-sk.info/newyear2010.php

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

      Пример, который вы привели, требует поддержки со стороны сервера (возможность устанавливать свои php скрипты, а на ukoz'е их устанавливать нельзя) и нужна панель администратора, чтобы удалять лишние игрушки.

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

  • Szen

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

  • Szen

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

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

      P.S. Если вы решите реализовать более сложный вариант и рассказать о нём, то я могу сделать анонс такой статьи (в твиттере и блоге).

  • Виталий Владимирович Петров

    !www.TOLYATTINEC.ru !

  • Виталий Владимирович Петров

    у Вас — лишь вырезки из программы . текста javascript- НЕТУ !

  • Виталий Владимирович Петров

    а не разрезанную Ересь,а текст html-файла добавить можете ли ?