Кнопка с анимированным текстом
Описание: Кнопка с динамически появляющимся текстом. При нажатии на кнопку пользователь переходит на заданный в скрипте файл. Не совсем тривиальный скрипт JavaScript, но весьма захватывающее внимание. Вы можете создать его на своём сайте, и внимание к этому JavaScript у посетителей Вам обеспечено.
Результат работы:
Код JavaScript (вставлять между тегами <head> и </head>):
<script language="javascript">
var timerID = 0;
var timerRunning = false;
var charNo = 0;
var charMax = 0;
var textLine = "Michael Rusakov - Personal Web Site"; //Текст на кнопке
var urlLine = "http://www.myrusakov.ru"; //Адрес перехода после нажатия
function startShow() {
stopShow();
showLine();
timerRunning = true;
}
function stopShow() {
if (timerRunning) {
clearTimeout(timerID);
timerRunning = false;
}
}
function showLine() {
charMax = textLine.length;
if (charNo <= charMax) {
document.animationbutton.but.value = textLine.substring(0, charNo);
document.animationbutton.but.style.color = "red";
charNo++;
timerID = setTimeout("showLine()", 100);
}
else {
charNo = 0;
timerID = setTimeout("showLine()", 3000);
}
}
function gotoURL() {
location.href = urlLine;
}
</script>Код HTML (вставлять между тегами <body onload = "startShow()"> и </body>):
<form name = "animationbutton">
<input type = "button" name = "but" onClick = "gotoURL()">
</form>C уважением, Михаил Русаков и сайт http://myrusakov.ru.
-
Создано 19.04.2010 13:45:40
-
Михаил Русаков
Комментарии (18):
Классный скрипт. Хотел повесить такую кнопку на отправку формы и выявил одну особенность. Почему-то в Opera нельзя изменять значения 'value' у кнопки типа 'submit'. Чтобы заработал скрипт, пришлось поставить кнопке тип 'button' и присвоить атрибут: onclick = 'document.form.submit()'
Ответить
Здравствуйте Михаил. Подскажите пожалуйста, как сделать такую кнопку,как у Вас на странице?(синенькая)
Ответить
Это анимированное GIF-изображение. Её можно сделать в Photoshop.
Ответить
Здравствуйте Михаил.Кнопка-изображение-это понятно. А как правильно написать ссылку для этой кнопки,для размещения ее на другом сайте?
Ответить
На всех сайтах будет работать этот же код.
Ответить
Я прошу прощения, какой именно?
Ответить
Из этой статьи.
Ответить
Здравствуйте Михаил.Наверно я не совсем правильно объяснила суть вопроса. Я хочу создать свою кнопку со своей ссылкой на свой сайт для обмена.Кнопку я уже сделала. Как правильно написать ссылку?
Ответить
Поставьте здесь свой адрес: var urlLine = "http://www.myrusakov.ru"; //Адрес перехода после нажатия
Ответить
Здравствуйте Михаил. Попробовала разместить ссылку.Но что то при переходе по ней сайт не отображается. Что не правильно я написала? <a href='http:// mastericam.ru /'target='_blank'><img src="images/button.gif" border='0' alt='Вяжем для всей семьи'/></a> </p>
Ответить
Во-первых, пробел после http:// Во-вторых, нет пробелов между значением атрибута и именем следующего атрибута (target).
Ответить
Спасибо. Все исправила,все работает
Ответить
Спасибо. а у вас есть скрипт по онлайн консультации
Ответить
Нет.
Ответить
интересный скрипт, давай уроки по JAVA и C#. PHP и Javascript не научит програмировать.
Ответить
Как сделать, чтобы новый сайт открывался в другой вкладке, а не в этой же?
Ответить
Для открытия в новом окне надо использовать window.open()
Ответить
как сделать чтоб приветствие было по центру?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.