Печатающийся текст на экране (Javascript)
Раньше этот скрипт стоял на этом сайте, но однажды я решил его убрать. Не потому что он плохо работал, а потому что, по некоторым соображениям, я посчитал его лишним. Но чтобы скрипт сохранился, я решил создать этот пост. Велика вероятность, что он мне еще пригодится.
Скрипт ниже имитирует печатание заголовков статей на экране в виде ссылки на саму статью. Заголовки указываются в скрипте и также указываются УРЛы к ним. Скрипт создает ссылки из переданных данных и печатает ссылки в одной строке поочередно.
ДемоА это код скрипта:
Рекомендую: <a id="Ticker" href="http://example.com/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="my-text"> Этот текст печатается сам. И не важно, что вы не смотрите на него или даже не смотрите вообще куда-либо. Он будет продолжать печататься со стабильной скоростью: одна буква / 50 милесекунд. <br><br> Как видите, можно напечатать даже переносы строк. <br><br> В прочем это не печатание, а вывод уже готового текста в стиле печатной машинки - это интересно и иногда привлекает читателей, поэтому возьмите на вооружение этот скрип. К тому же, он ну очень прост. </div> <script> function printText( el ){ let letterTimeout = 20 let text = el.innerHTML let i = 1 let print__fn = function(){ if( i <= text.length ){ el.innerHTML = text.substr( 0, i ); setTimeout( arguments.callee, letterTimeout ); } i++; } print__fn() // init }; // init let el = document.getElementById( 'my-text' ) printText( el ); </script>