Печатающийся текст на экране (Javascript)

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

Скрипт ниже имитирует печатание заголовков статей на экране в виде ссылки на саму статью. Заголовки указываются в скрипте и также указываются УРЛы к ним. Скрипт создает ссылки из переданных данных и печатает ссылки в одной строке поочередно.

Вот демонстрация работы.

А это код скрипта:

Рекомендую: <a id="Ticker" href="http://site.ru/default_link">Здесь можно вписать дефолтную ссылку.</a>
<script type="text/javascript">
	var CharTimeout = 50; // скорость печатания
	var StoryTimeout = 2000; // время ожидания перед переключением

	var Summaries = new Array();
	var SiteLinks = new Array();

		Summaries[0] = 'Плагин Webmaster Yandex для WordPress';
		SiteLinks[0] = 'http://wp-kama.ru/?p=4015';
		Summaries[1] = 'Kama Thumbnail: плагин WordPress для создание картинок-миниатюр записи';
		SiteLinks[1] = 'http://wp-kama.ru/id_142/kama-thumbnail.html';
		Summaries[2] = 'Настраиваем robots.txt для WordPress';
		SiteLinks[2] = 'http://wp-kama.ru/id_803/pishem-pravilnyiy-robotstxt-dlya-wordpress.html';
		Summaries[3] = 'WP-Cumulus: 3D облако меток на flash (улучшенная русская версия)';
		SiteLinks[3] = 'http://wp-kama.ru/?p=4271';
		Summaries[4] = 'Плагин для защиты от спама в комментариях WordPress';
		SiteLinks[4] = 'http://wp-kama.ru/id_95/plagin-dlya-blokirovki-spama-v-kommentariyah-dlya-wordpress.html';
		Summaries[5] = 'Плагин для легкого управления сайтом на WordPress (версия 3)';
		SiteLinks[5] = 'http://wp-kama.ru/id_127/plagin-dlya-legkogo-upravleniya-saytom-na-wordpress-versiya-3.html';
		Summaries[6] = 'Автоматическое растягивание textarea на javascript и jQuery';
		SiteLinks[6] = 'http://wp-kama.ru/id_112/avtomaticheskoe-rastyagivanie-polya-textarea-kommentariya-versiya-2.html';

	/* Печатание текста - Тиккер
	----------------------------------------------------------------
	var CharTimeout = 20;
	var StoryTimeout = 7000;
	var Summaries = new Array();
	var SiteLinks = new Array();
		Summaries[0] = "CMS для простых сайтов GetSimple на русском языке";
		SiteLinks[0] = "#link1";
		Summaries[1] = "Spectrum - шикарная тема для WordPress на русском языке";
		SiteLinks[1] = "#link2";
	startTicker();
	*/

	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);
	}
	// Генератор подстановки знака
	function znak(){
		if(CurrentLength == StorySummary.length) return "";
		else return "|";
	}

	startTicker();
</script>

Пояснения к коду

Параметры CharTimeout = 50; и StoryTimeout = 2000; - это настройки:

• CharTimeout - скорость печатания
• StoryTimeout - время ожидания перед переключением с одной ссылки на другую.

Блок

Summaries[0] = 'Плагин Webmaster Yandex для WordPress';
SiteLinks[0] = 'http://wp-kama.ru/?p=4015';
...
Summaries[6] = 'Автоматическое растягивание textarea на javascript и jQuery';
SiteLinks[6] = 'http://wp-kama.ru/id_112/avtomaticheskoe-rastyagivanie-polya-textarea-kommentariya-versiya-2.html';

можно получать динамичестки в WordPress. Допустим, можно получать записи с произвольным полем "Рекомендую" и вывести их в нужном формате. Для WordPress код будет таким:

<?php 
$query = new WP_Query( 'meta_key=Рекомендую' );
$arnum = 0;
while ( $query->have_posts() ) { 
	$query->the_post();
	echo "
		Summaries[$arnum] = '". addslashes( get_the_title() ) ."';
		SiteLinks[$arnum] = '". get_permalink() ."';
	";
	$arnum++;
}
wp_reset_query();
?>

Просто печатающийся текст

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

<div id="type_text"></div>

<script language="JavaScript">
var text = 'Этот текст печатается сам. И не важно, что вы не смотрите на него или даже'+ 
'не смотрите вообще куда-либо. Он будет продолжать печататься со стабильной скоростью:'+ 
'одна буква / 50 милесекунд. <br><br> Как видите, можно напечатать даже переносы строк.'+ 
'<br><br> В прочем это не печатание, а вывод уже готового текста в стиле печатной машинки'+ 
'- это интересно и иногда привлекает читателей, поэтому возьмите на вооружение этот скрип.'+ 
'К тому же, он ну очень прост.';

function printed_el_text( el ){
	var text = el.innerHTML,
		i = 0,
		__print = function (){
			i++;
			if( i <= text.length ){
				el.innerHTML = text.substr(0, i);
				setTimeout( __print, 20 );
			}
		};
		__print();
};

printed_el_text( document.getElementById("type_text") );

</script>