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

Такой баннер можно реализовать на собственном сайте с помощью jQuery.

Как это работает?
Ничего сложного!

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

Массив с именем ‘map’ хранит информацию о том, какой элемент нужно включать для отображения символа.

Функция getMap() создаёт массив, который содержит образ текста для отображения на экране.

Функция draw() рисует текст на экране (включая нужные «светодиоды»).

Функция scrollText() перемещает текст по экрану. Данная функция просто берет крайний слева столбец и ставит после крайнего справа.

Светодиодный баннер прокручивается.

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

map[")"] = [[0,7],[1,6],[2,3,4,5]];

В данном случае map хранит информацию о том, как будет представлен символ ‘)’. Его представление состоит из 3-х элементов, что означает, что на экране символ ‘)’ будет состоять из 3-х столбцов. [0,7] в первом столбце означает, что 0-й и 7-й «светодиоды» должны быть включены в данном столбце, а остальные выключены. [1,6] во втором столбце означает, что 1-й и 6-й «светодиоды» должны быть включены в данном столбце, а остальные выключены. Ну а в последнем столбце будут включаться 2, 3, 4 и 5 «светодиоды». Таким образом на экране баннера сформируется символ ‘)’.

Для русского языка вам придётся составить таблицы символов самим.

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

#led{
     border: 1px solid #ddd;
     background-color: #000;
     padding: 0;
     overflow: hidden;
 }
 .light{
     display: block; float: left;
     width: 4px; height: 4px;
     line-height: 0; font-size: 0px;
     margin: 1px; padding: 0;
     background-color: #422;
 
     -moz-border-radius: 1px;
     -webkit-border-radius: 1px;
 }
 .on{
     background-color: red;
 }

JavaScript

function createLights(cols, rows, displayWidth)
 {
     $('#led').html('<div id="pcb"></div>');
      
     for(i = 0; i < rows; i++){
         for(j = 0; j < cols; j++){
             $('#pcb').append('<span rel="'+j+'" class="light col-'+j+' row-'+i+'" id="c'+j+'-r'+i+'"></span>');
         }
     }
 
     var lightSize = 6; // ширина светящейся точки + отступ
     $('#pcb').css({width: (cols*lightSize)+1 +'px', height: rows*lightSize +'px'});
     $('#led').css({width: displayWidth*lightSize +'px', height: rows*lightSize +'px'});
 }
  
 function getMap(text)
 {
     var textMap = new Array();
     var totalCols = 0;
     for(i=0; i < text.length; i++){
         var charMap = map[text.charAt(i)];
         if(charMap != undefined){
             for(j = 0; j < charMap.length; j++){
                 textMap[totalCols] = charMap[j];
                 totalCols++;
             }
             // Добавляем пустой столбец
             textMap[totalCols] = [];
             totalCols++;
         }
     }
      
     return textMap;
 }
 
 function draw(map)
 {
     for(i=0; i<map.length; i++){
         for(j=0; j<8; j++){
             var exist = (map[i] == undefined) ? -1 : map[i].indexOf(j);
             if(exist != undefined && exist >= 0){
                  $('#c'+i+'-r'+j).addClass('on');
              }
         }
     }
 }
 
 function scrollText(textCols)
 {
     var col = $('#led .light').eq(0).attr('rel');
       
     $('#led .col-'+col).each(function(){
         var myId = $(this).attr('id');
         var myRow = myId.substring(myId.indexOf('r')+1, myId.length);
         $(this).insertAfter($('#led .row-'+myRow).eq(textCols-1));
     });
      
     setTimeout('scrollText('+ textCols +')', 150)
 }
 
 // Нам нужен метод Array.indexOf который не поддерживается в IE.
 if(!Array.indexOf){ Array.prototype.indexOf = function(obj){ for(var i=0; i<this.length; i++){ if(this[i]==obj){ return i; } } return -1; } }
  
 $(document).ready(function(){
     var boardWidth = 60;
     var boardheight = 8;
      
     textMap = getMap($('#led').text());
     createLights(textMap.length, boardheight, boardWidth);
     draw(textMap);
     scrollText(textMap.length);
 })

Добавлено: 18 Апреля 2018 20:12:57 Добавил: Андрей Ковальчук Нравится 0

Добавить