Меняющиеся сообщения
В данной теме мы рассмотрим, как при помощи JavaScript сделать блок с сообщениями, которые будут плавно меняться через заданный промежуток времени.
Чуть ниже располагается наглядный пример работы предлагаемого скрипта:
Обратите внимание на то, что цвет сообщений изменяется плавно. В этом и есть главное отличие предлагаемого скрипта от подобных, реализующих обычную смену сообщений.
Для реализации такого блока с меняющимися сообщениями, как в примере выше, Вам необходимо первоначально разместить блок в теле Вашей страничке следующим образом:
<div id="mess_box" style="border: 1px solid black; width: 300px;
height: 100px; margin: 0 auto; background: #FFFFFF; font-family: Times New Roman;
font-size: 22px; text-align: center;"></div>Далее добавьте JavaScript кодом, который будет осуществлять смену сообщений:
<script type="text/javascript">
var delay = 3000;
var text = new Array();
text[0] = "<b>Это первое</b> <br>сообщение<br>";
text[1] = "Второе сообщение, идущее сразу за первым";
text[2] = "<a href=\"http://usefulscript.ru\"><b>UsefulScript.ru</b></a>" +
"<br>Сайт полезных скриптов и онлайн-сервисов";
var mess = 0;
function change_mess() {
if (mess>=text.length) mess = 0;
document.getElementById("mess_box").innerHTML = text[mess];
fade_color();
mess++;
setTimeout("change_mess()", delay);
}
frame = 20;
hex_r = 155;
hex_g = 255;
hex_b = 155;
function fade_color() {
var d = document.getElementById("mess_box");
if (frame>0) {
hex_r -= 5;
hex_g -= 5;
hex_b -= 5;
d.style.color = "rgb(" + hex_r + "," + hex_g + "," + hex_b + ")";
frame--;
setTimeout("fade_color()", 40);
}
else {
d.style.color = "rgb(0, 155, 0)";
frame = 20;
hex_r = 155;
hex_g = 255;
hex_b = 155;
}
}
change_mess();
</script>Функция fade_color() в скрипте отвечает за плавное "проявление" текста сообщения. Если она Вам не нужна, то можете смело ее удалить.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
<div id="mess_box" style="border: 1px solid black; width: 300px;
height: 100px; margin: 0 auto; background: #FFFFFF; font-family: Times New Roman;
font-size: 22px; text-align: center;"></div>
Скопировал в body, квадрат есть, а текста нет.
Строчки принудительно разорвал и склеил через знак "+", теперь должно все работать без внесения каких-либо изменений.