Банер у вигляді світлодіодного екрана з рядком, що біжить

Такий банер можна реалізувати на власному сайті за допомогою jQuery.

RUSELLER.COM *** 1 2 3 4 5 6 7 8 9 0 ###

Як це працює?

Функція createLights () створює порожню панель екрану (div) і розміщує на ній «світлодіоди» (елементи span).

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

Функція getMap () створює масив, який містить образ тексту для відображення на екрані.

Функція draw () малює текст на екрані (включаючи потрібні «світлодіоди»).

Функція scrollText () переміщує текст по екрану. Ця функція просто бере крайній зліва стовпець і ставить після крайнього праворуч.

Світлодіодний банер прокручується.

Формат представлення символів для банера

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

В даному випадку map зберігає інформацію про те, як буде представлений символ ')'. Його уявлення складається з 3-х елементів, що означає, що на екрані символ ')' буде складатися з 3-х стовпців. [0,7] в першому стовпці означає, що 0-й і 7-й «світлодіоди» повинні бути включені в даному стовпці, а решта вимкнені. [1,6] у другому стовпці означає, що 1-й і 6-й «світлодіоди» повинні бути включені в даному стовпці, а решта вимкнені. Ну а в останньому стовпці будуть включатися 2, 3, 4 і 5 «світлодіоди». Таким чином на екрані банера сформується символ ')'.

Для російської мови вам доведеться скласти таблиці символів самим.

CSS "светодіоной" панелі

Банер у вигляді світлодіодного екрана з рядком, що біжить

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Банер у вигляді світлодіодного екрана з рядком, що біжить

Банер у вигляді світлодіодного екрана з рядком, що біжить

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Банер у вигляді світлодіодного екрана з рядком, що біжить

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Банер у вигляді світлодіодного екрана з рядком, що біжить

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!

Схожі статті