Посимвольный вывод текста с эффектом печатной машинки и подсветкой появляющегося символа
Ранее мы уже рассматривали похожий скрипт в теме Вывод текста с эффектом печатной машинки. В этот раз мы предлагаем Вашему вниманию скрипт, который посимвольно выводит на экран заданные строки (эффект печатной машинки). Основным отличием его от рассмотренного ранее скрипта печатающегося текста является подсветка появляющегося символа.
Данный скрипт удобен тем, что при его помощи возможно поочередно выводить различные сообщения в одном и том же месте странички с эффектом печатной машинки.
Ниже расположен пример работы нашего скрипта:
Для того чтобы точно такой же печатающийся текст с подсветкой появляющегося символа, вставьте следующий фрагмент кода в тело Вашей странички:
<script type="text/javascript">
var mess=new Array(
"Сайт полезных скриптов UsefulScript.ru ",
"Скрипты на PHP и JavaScript ",
"Обзоры полезных онлайн-сервисов ");
var size = 32;
var txtcol = "#C0C0C0";
var lastcol = "#00CC00";
var pause = 1500;
var speed = 70;
var i = i_str = 0;
var msg = msgpre = msgafter = "";
function get_text() {
msgpre = mess[i].substring(0, i_str-1);
msgafter = mess[i].substring(i_str-1, i_str);
msg = "<span style='position: relative; color:" + txtcol + "; font-size: " +
size + "px;'>" + msgpre + "<span style='color:" + lastcol + ";'>" + msgafter +
"</span></span>";
}
function go() {
if (i_str<=mess[i].length-1) {
i_str++;
get_text();
if (document.all) typewriter.innerHTML = msg;
else if (document.layers) {
document.typewriter.document.write(msg);
document.typewriter.document.close();
}
else document.getElementById("typewriter").innerHTML = msg;
var timer = setTimeout("go()", speed);
}
else {
clearTimeout(timer);
var timer = setTimeout("changemess()", pause);
}
}
function changemess() {
i++;
i_str = 0;
if (i>mess.length-1) i = 0;
go();
}
</script>В том месте Вашей странички, где необходимо выводить заданные строки с эффектом печатной машинки, вставьте следующий код:
<p id="typewriter"></p>И в конце странички, когда уже загрузится ее основное содержимое, необходимо запустить нашу функцию посимвольного вывода текста следующим образом:
<script type="text/javascript">
go();
</script>Как видно из примера, данный скрипт может украсить любую страничку.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
В итоге при установке обоих скриптов можно получить только какой-то один вариант вывода текста на сайте.
i_str++;
get_text();
if (document.all) typewriter.innerHTML=msg;
else if (document.layers) {
document.typewriter.document.write(msg);
document.typewriter.document.close();
}
else document.getElementById("typewriter").innerHTML=msg;
var timer=setTimeout("go()", speed);
И всю функцию changemess() { ... }
function changemess() {
if (n<3){ i++; n++;
i_str=0;
if (i>mess.length-1) {i=0;}
go();} }
Здесь добавил счетчик n который после трех итераций (три строки массива) останавливает печать массива. Ранее в теле скрипта n присвоил значение 1. (var n=1;)
Подскажите, как можно влиять, например, на время задержки, скорость набора?
Может к скрипту пару ручек приделать, если это не очень сложно.
var pause=1500; - время задержки между выводом строк.
А как фон изменить на прозрачный?
Подскажите, пожалуйста: как добавить ссылки к тексту, чтобы переходить по этим ссылкам на другие страницы?
Подскажите, пожалуйста, как вывести текст парами.
Анонс на английском, например. Ниже строчка с русским переводом.
**********************************
"News from Afghanistan."
"Новости из Афганистана"
**********************************
...Как пример.
Подскажите, пожалуйста, как отловить момент, когда скрипт заканчивает печать последнего символа строки?