Печатающийся текст на экране (Javascript)
HTML
Рекомендую: <a id="Ticker" href="#">Полезные, интересные статьи о CSS, jQuery, Wordpress.</a>
CSS
#Ticker
{
color:green;
font-size: 16px;
font-family: 'Marck Script', cursive;
white-space:nowrap;
}
JavaScript
/* Печатание текста - Тиккер
---------------------------------------------------------------- */
var CharTimeout = 50;
var StoryTimeout = 2000;
var Summaries = new Array();
var SiteLinks = new Array();
Summaries[0] = 'Абсолютное центрирование отзывчивого изображения на CSS';
SiteLinks[0] = '#link1';
Summaries[1] = '15 многоцелевых и специализированных тем WordPress премиум-класса';
SiteLinks[1] = '#link2';
Summaries[2] = 'Отзывчивый Аккордеон на чистом CSS';
SiteLinks[2] = '#link3';
Summaries[3] = 'Выдвигающееся боковое меню на чистом CSS';
SiteLinks[3] = '#link14';
Summaries[4] = 'Отзывчивые вкладки (табы) с переходом в аккордеон jQuery & CSS3';
SiteLinks[4] = '#link5';
Summaries[5] = 'Выдвигающаяся верхняя панель на чистом CSS';
SiteLinks[5] = '#link6';
Summaries[6] = 'Отзывчивый аккордеон с помощью jQuery';
SiteLinks[6] = '#link7';
function startTicker(){
massiveItemCount = Number(Summaries.length); //количество элементов массива
// Определяем значения запуска
CurrentStory = -1;
CurrentLength = 0;
// Расположение объекта
AnchorObject = document.getElementById("Ticker");
runTheTicker();
}
// Основной цикл тиккера
function runTheTicker(){
var myTimeout;
// Переход к следующему элементу или ваще тексту
if(CurrentLength == 0){
CurrentStory++;
CurrentStory = CurrentStory % massiveItemCount;
StorySummary = Summaries[CurrentStory].replace(/"/g,'"');
AnchorObject.href = SiteLinks[CurrentStory];
}
// Распологаем текущий текст в анкор с печатанием
AnchorObject.innerHTML = StorySummary.substring(0,CurrentLength) + znak();
// Преобразуем дилну для подстроки и определяем таймер
if(CurrentLength != StorySummary.length){
CurrentLength++;
myTimeout = CharTimeout;
} else {
CurrentLength = 0;
myTimeout = StoryTimeout;
}
// Повторяем цикл с учетеом задержки
setTimeout("runTheTicker()", myTimeout);
}
// Генератор подстановки...