Loading





Форекс с Альпари

eTXT




Анкетка


Бегущая строка на web-странице (продолжение)


Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

<<< На предыдущую  На двух страницах.  Страница 2.

Смотрим результат:

Бегущая строка с расширенным набором параметров

Небольшое резюме: в этом варианте мы сделали изменяемые размеры поля строки, добавили фоновый цвет, строка может двигаться в любом из четырёх направлений и с разной скоростью.


При желании, можно использовать и несколько дополнительных атрибутов:

  1. behavior="..." – задает тип движения.
    Возможные варианты:
    alternate – перемещение между левой и правой (верхней и нижней) границами и обратно;
    slide – текст появляется с одного края и останавливается у другого;
    scroll - циклическая прокрутка текста из одного конца в другой.
  2. scrolldelay="..." - этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах (100, 200, 300).
  3. loop="..." - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз.
  4. hspace - величина, на которую отступают от строки объекты справа и слева.
  5. vspace - величина отступа по вертикали.

Если добавить некоторые атрибуты (например, behavior="scroll" scrolldelay="200" loop="5"), может получиться следующий пример: Бегущая строка с расширенным набором параметров Бегущая строка с расширенным набором параметров

Примечания:

1. Если Вы видите пустое поле без СТРОКИ, значит 5 запланированных показов (loop="5") пройдено и нужно

2. Если планируете вставку картинки в фоновое поле, лучше будет выглядеть картинка с бесцветным фоном. Поэтому нужно предварительно найти такую картинку, либо убрать фон в программе Фотошоп. Материал по этой теме смотрите ЗДЕСЬ.

3. У бегущей строки есть небольшие проблемы с кроссбраузерностью. Тег marquee корректно читается браузером Internet Explorer, а в других браузерах Вы можете увидеть несколько другое, чем ожидали, либо не увидеть ничего. Такие вот суровые будни! А кому сейчас легко, санкции, напряженная обстановка в мире и т.д.


Если Вы используете на сайте файл стилей style.css, некоторые параметры можно задать в нём, например:


marquee /* бегущая строка */
{
width: 90%;
height: 115px;
margin: 0 auto;
text-align: left;
background-color: #eaf1f9;
}

Пояснения:

          width: 90%; - как известно, это ширина строки. В файле style.css её следует указывать лишь в варианте, когда Вы планируете размещение нескольких бегущих строк одинаковой ширины, а именно 90% в нашем случае. Конечно, практичнее её указывать в свойствах тега marquee непосредственно на html-странице, определяя каждой строке своё значение width.

          height:115px; - высота поля строки. Аналогично предыдущему пояснению.

          margin:0 auto; - выравнивание поля строки по центру страницы. Именно это значение уместно в файле style.css, так как align="center" и align="middle" в marquee корректируют только скроллируемый текст, а поле приходится центровать тегом center.

          text-align:left; - так же уместное значение. Выравнивание текста в строке, left - по левому краю, right - по правому краю, justify - по ширине страницы.

          background-color: #eaf1f9; - фоновый цвет. Уместен здесь только в случае, если все поля строк Вы хотите сделать одинаковым цветом.

На этом всё. Надеюсь, что урок был понятный, вроде бы всё «разложил по полочкам». Заходите ещё на мой сайт, оставляйте комментарии. Здесь много полезного материала, особенно для начинающих. Всегда с Вами, L.M.


<<< На предыдущую  На двух страницах.  Конец страницы 2.

Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка