Мигающая кнопка JavaScript
Описание: Достаточно простой скрипт, основанный на таймерах JavaScript. Всё, что он делает, так это при наведении мышки начинает переливаться цветом, а при отвода кнопки мыши от кнопки, начинается обратное действие. В общем, смотрите на результат.
Результат работы:
Наведите мышкой на кнопку.
Код javascript (вставлять между тегами <head> и </head>):
<script language = "javascript">
arrColor = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
function mouseOut() {
for (i = 0; i < 13; i++)
setTimeout ('document.blinkbutton.button.style.background = "#'+arrColor[15-i]+'0'+arrColor[15-i]+'FFF";', i * 50);
}
function mouseOver() {
for (i = 0; i < 15; i++)
setTimeout ('document.blinkbutton.button.style.background = "#'+arrColor[i]+'0'+arrColor[i]+'F31";', i * 50);
}
</script>Код HTML (вставлять между тегами <body> и </body>):
<form name = "blinkbutton">
<input type="button" name="button" value=" Наведи мышку " onMouseOver='mouseOver()' onMouseOut='mouseOut()' style="background-color: #1400FF">
</form> -
Создано 29.10.2010 14:11:49
-
Михаил Русаков
Комментарии (20):
Симпатичный скрипт. Жаль только, что везде, где применяются onMouseOver / onMouseOut, начинаются жуткие видеоэффекты, если мышкой водить не так аккуратно, как задумал программер)) Интересно, можно ли этого избежать?
Ответить
Мне тоже очень понравилась эта идея. К сожалению, я не умею программировать. Но проблема, мне кажется, в том, что при быстром вождении мышки начинают работать одновременно сразу две функции. Думаю, что: 1)Надо оставить одну функцию, которая начинает работать при onMouseOver; 2)После каждого шага изменения цвета должно проверяться условие, где указатель мыши. Если над кнопкой, то цикл повторяется. Если вне кнопки, то цвет должен меняться в другую сторону. Если у кого есть решение, напишите на форуме, а здесь дайте ссылку. Может быть, я и сама напишу, если изучу ява скрипт.
Ответить
Чтобы цвет "менялся в другую сторону", нужно его задавать по одной формуле, а тут две разные. Как вариант, можно прекращать цикл, стирая timeout. Только для этого функции нужно по-другому переписать. Попробуйте: <script language = "javascript"> arrColor = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; var tover; var tout; function mouseOut(out) { document.blinkbutton.button.style.background = '#'+arrColor[15-out]+'0'+arrColor[15-out]+'FFF'; if(out < 12) { out++; tout = setTimeout (mouseOut, out * 4, out); } } function mouseOver(over) { document.blinkbutton.button.style.background = '#'+arrColor[over]+'0'+arrColor[over]+'F31'; if (over < 15) { over++; tover = setTimeout(mouseOver, over * 4, over); } } </script> Соответственно запускаем их с параметром: <form name = "blinkbutton"> <input type="button" name="button" value=" Наведи мышку " onMouseOver='clearTimeout(tout); mouseOver(1)' onMouseOut='clearTimeout(tover); mouseOut(1)' style="background: rgb(48, 63, 255)"> </form>
Ответить
жаль, у Русакова переноса строки нету)
Ответить
Сева, я только вчера увидела ваш ответ, поэтому отвечаю с опозданием. Просмотрела я сегодня вашу версию скрипта - действительно, больше цвет не скачет. Просто удивительно. Вот буду теперь разбираться с кодом, т.к. пока не понимаю, как он работает.
Ответить
Подскажите, пожалуйста, как правильно записать условие if(указатель_мыши_находится_над_button=true) Условие внутри функции, которая будет внутри head
Ответить
Здесь я вижу только один вариант. Надо создать переменную flag, которой присваивать значение true, когда мышку навели на кнопку (onmouseover), а когда уводят мышку с кнопки (onmouseout), то присваивать значение false. И в условии проверять значение переменной flag.
Ответить
а можно спросить каждый раз анимация происходит столько же секунд сколько и предыдущий раз.Например анимация 3 секунды а следующая тоже 3 секунды?
Ответить
Если да то здесь очень легко решить эту проблему
Ответить
Да, одинаковое количество времени.
Ответить
ну тогда можно при начале первой анимации создать переменную и присвоить ей значение false а потом при завершении анимации присвоить ей true.Когда пользователь захочет начать другю анимацию можно проверить если значение переменной равно false то return false; если true то return false если я обьяснил не понятно то могу написать код.
Ответить
ой я не правильно написал если если true то return true a не false))
Ответить
Не получится, setTimeout() в 15 итераций просто ставится в очередь, а не выполняется. Следовательно, если после цикла поставить true, то true будет гораздо раньше, чем пройдёт даже самое первое изменение цвета.
Ответить
тогда нужно написать 2 settimeout-а 1 для изменения цвета а второй для изменения значения переменной.
Ответить
так получится?
Ответить
Функция settimeout() являются очень нестабильной, то есть поставив задержку 1000, не факт, что через 1 секунду будет выполнена операция. Повиснет компьютер у пользователя, и она будет выполнена через 1.5 секунды. В общем, решается эта проблема легко как-то, я подумаю попозже.
Ответить
а можно спросить почему Вы там написали i * 50 просто я у меня вместо этого написал просто 50 и она не работала?
Ответить
Работает всё аналогично, просто нет плавности. А ввиду того, что 50мс * 15 - это очень быстро, вот Вы и не замечали. И Вам казалось, что цвет просто сразу менялся.
Ответить
Но я потом и ставил 500.Тогда тоже так было.500мс это же уже много.
Ответить
Это связано с тем, что итерации цикла проходят очень быстро. Гораздо быстрее, чем 500 мс. В каждой итерации происходит перезапись цвета кнопки. Поэтому неудивительно, что побеждает в итоге самая последняя итерация, а другие просто не успевают сработать. Поясняю: 1. Через 500 мс цвет меняется. 2. Через 500.5мс цвет снова меняется. 3. Через 501 мс цвет снова меняется. И так далее. Поэтому в каждой итерации необходимо увеличивать время задержки. Надеюсь, понятно объяснил.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.