Загрузить PDF
Загрузить PDF
Мигающий текст никогда не был стандартной функцией HTML, и потому по-разному реализуется в каждом браузере. Наиболее близким вариантом, который полагается только на HTML, является тег marquee, но даже он не работает в Google Chrome. JavaScript — более надежный метод, позволяющий скопировать и вставить код прямо в HTML-документ.
Шаги
-
Пользуйтесь им только для личных проектов. Тег marquee давно устарел, и разработчикам настоятельно рекомендуется его избегать. Он по-разному отображается в браузерах, а после очередного обновления текст и вовсе может перестать мигать. [1] X Источник информации [2] X Источник информации Если вы разрабатываете сайт на профессиональной основе, то лучше положитесь на Javascript .
- Google Chrome не поддерживает атрибут scrollamount, на который опирается этот метод. [3] X Источник информации По этой причине текст будет не мигать, а перемещаться по странице.
-
Окружите мигающий текст тегами marquee. Откройте HTML-документ в простом текстовом редакторе. Введите <marquee> перед текстом, который должен мигать. Вставьте </marquee> в конце текста.
- Не забудьте сначала наполнить HTML-страницу тегами <html>, <head> и <body>.
-
Укажите ширину текста. Добавьте к открывающему тегу <marquee width="300" >. Это никак не изменит размер шрифта. Есть две причины, по которым вам может потребоваться изменить это значение на другое:
- Если текст выйдет за границы, то он будет перемещаться, а не мигать. Увеличьте ширину текста, чтобы этого избежать.
- В Chrome текст будет перемещаться на расстояние, определяемое указанной шириной.
-
Продублируйте значение ширины для атрибута scrollamount. Внутри этого же тега добавьте scrollamount="300" (то же значение, что и у ширины). Тег marquee заставит текст перемещаться по всей странице. Но если скопировать значение ширины в атрибут scrollamount, то текст будет перемещаться на свою изначальную позицию, вызывая тем самым эффект мерцания.
- Ваш текст должен выглядеть примерно так:
<marquee width="300" scrollamount="300">Мигающий текст.</marquee>.
- Ваш текст должен выглядеть примерно так:
-
Измените задержку прокрутки. Откройте HTML-файл в браузере, чтобы увидеть результат. Если текст мигает слишком быстро или слишком медленно, измените скорость с помощью атрибута scrolldelay="500" . По умолчанию задержка имеет значение 85 миллисекунд. [4] X Источник информации Увеличьте это число, чтобы замедлить мерцание, или уменьшите его, чтобы ускорить.
- Теперь строка должна выглядеть следующим образом:
<marquee width="300" scrollamount="300" scrolldelay="500">Мигающий текст.</marquee>
- Теперь строка должна выглядеть следующим образом:
-
Ограничьте количество бликов (необязательно). Многих пользователей раздражает мигающий текст. Если вы уже привлекли внимание пользователя, остановите мерцание, добавив атрибут loop="7" . Теперь текст будет мигать семь раз, а затем исчезнет. Вместо семи можно использовать любое другое число.
- Финальный вид кода:
<marquee width="300" scrollamount="300" scrolldelay="500" loop="7">Мигающий текст.</marquee>
Реклама - Финальный вид кода:
-
Вставьте скрипт мерцания в заголовок HTML-документа. Вставьте следующий код JavaScript между тегами <head> и </head> HTML-документа: [5] X Источник информации
- function blinktext() {
var f = document.getElementById('announcement');
setInterval(function() {
f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
}, 1000);
}
- function blinktext() {
-
Вставьте команду для загрузки скрипта. Приведенный выше код определяет функцию и называет ее «blinktext» (мигающий текст). Чтобы использовать эту функцию в HTML, измените тег <body> на <body onload="blinktext();">.
-
Определите мигающий текст как объявление. Тогда скрипт затронет только элементы с идентификатором «announcement» (объявление). Поместите мигающий текст в любой элемент и присвойте ему этот идентификатор. Например, введите <p id="announcement">Мигающий текст.</p> или <div id="announcement">Мигающий текст.</div>.
- Назовите его как угодно. Главное, чтобы в скрипте и идентификаторе стояло одно и то же слово.
-
Подкорректируйте скрипт. Число «1000» в скрипте отвечает за задержку между миганиями. Поскольку значение указывается в микросекундах, «1000» заставляет текст мигать раз в секунду. [6] X Источник информации Уменьшите это число, чтобы ускорить мигание, или увеличьте его, чтобы замедлить.
- Сама задержка, скорее всего, не будет в точности соответствовать этому значению. Вероятно, она будет немного короче, но может занять больше времени, если браузер будет перегружен запросами.
Реклама
Советы
- Для изменения внешнего вида выделенного текста используйте атрибут style. Попробуйте добавить style="border:solid".
- Помимо ширины к тегу marquee также можно добавить атрибут высоты, но многие браузеры его игнорируют. [7] X Источник информации Возможно, вы заметите разницу, если окружите текст рамкой.
- Чтобы заставить текст мигать, можно использовать анимацию CSS. Это довольно сложный процесс и не рекомендуется для начинающих программистов в CSS. При этом вам понадобится связанный CSS-документ, поскольку Firefox не поддерживает CSS-анимации со встроенным CSS. [8] X Источник информации
Реклама
Источники
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
- ↑ https://www.sitepoint.com/web-foundations/marquee-html-element/
- ↑ http://tutorial.techaltum.com/marquee.html
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
- ↑ http://stackoverflow.com/questions/8360130/how-to-make-a-text-flash-in-html-javascript
- ↑ http://javascript.info/tutorial/settimeout-setinterval
- ↑ https://www.sitepoint.com/web-foundations/marquee-html-element/
- ↑ http://caniuse.com/#feat=css-animation
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink
Об этой статье
Эту страницу просматривали 9337 раз.
Реклама
