WordPress как на ладони
wordpress jino

Печатающийся текст на экране (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>
Печатающийся текст на экране (Javascript) 17 комментариев
Вопросы 2 Все
  • petrozavodsky675 cайт: alkoweb.ru

    Забавно, как раз искал такой с утра пораньше, вовремя спс

    Ответить3.2 года назад #
  • Юрий cайт: allworldcar.ru @

    а как вставит такой текст только на одну страницу сайта?

    Ответить3.1 года назад #
  • Роман cайт: jblog-project.ru

    Спасибо! good Замечательные, простые и элегантные решения

    Ответить3 года назад #
  • DeHuC_644 cайт: creatorinfo.net

    Старый скрипт ) многие раньше им пользовались cool

    Ответить2.9 года назад #
    • Kama4485

      Есть какой-то новый или вы имели ввиду тема устарела?

      Ответить2.9 года назад #
  • Ivan cайт: v-svetlograde.ru @

    Всё супер, один из лучших сайтов в рунете!!! Все интересно и понятно, а для тех кому что то ни понятно пробовать пробовать и еще раз пробовать.

    под лежачий камень вода ни течет!!!!

    АВТОР МОЛОДЕЦ!!! good

    Ответить1.5 года назад #
  • Fe_DoS @

    В скрипте "Просто печатающийся текст" рекурсия бесконечна - это не есть хорошо. Надо добавить else где остановить таймер.

    var text = 'Этот текст печатается сам. И не важно, что вы не смотрите на него или даже'+ 
    'не смотрите вообще куда-либо. Он будет продолжать печататься со стабильной скоростью:'+ 
    'одна буква / 50 милесекунд. <br><br> Как видите, можно напечатать даже переносы строк.'+ 
    '<br><br> В прочем это не печатание, а вывод уже готового текста в стиле печатной машинки'+ 
    '- это интересно и иногда привлекает читателей, поэтому возьмите на вооружение этот скрип.'+ 
    'К тому же, он ну очень прост.';
    var i = 0;
    function type(){
    	i++;
    	if( i <= text.length )
    		document.getElementById("type_text").innerHTML = text.substr(0, i);
    	else
    		clearTimeout(timer);//останавливаем таймер
    
    	var timer = setTimeout( type, 50 );//Запускаем таймер
    }
    
    type();
    Ответитьгод назад #
    • Kama4485

      Спасибо за толковое замечание. Но твой код не отключает бесконечность! Сейчас поправлю thank_you

      Ответитьгод назад #
      • Fe_DoS @

        Действительно не отключает. Что-то я ступил. laugh
        Так будет правильно:

        var i = 0;
        function type(){
        	i++;
        	if( i <= text.length )
        	{   
        		document.getElementById("type_text").innerHTML = text.substr(0, i);
        		setTimeout( type, 50 );//Запускаем таймер
        	}
        }
        type();
        Ответитьгод назад #
  • Вячеслав @

    А можно ли используя 3 вариант присвоить какой-то текст не залазя при этом в js код? К примеру:

    ...
    var text = 'data'
    ...

    а в блоке

    <div id="type_text" data="Печатающийся текст"></div>

    Заранее спасибо за ответ!

  • Владимир

    А можно сделать так чтобы текст удалялся с анимацией как будто бекспейс жмешь.

  • Вадим

    Почему скрипт на мобильных устройствах печатается с не заданной скоростью.
    Очень медленно. Причем и другие скрипты тоже.

    -1
    • campusboy1832 cайт: wp-plus.ru

      Процессор телефона может не вытягивает обработку таких JS-спритов

Здравствуйте, !

Ваш комментарий