пятница, 31 августа 2012 г.

Как сделать бегущую строку

Как сделать бегущую строку
Ударим автопробегом по бездорожью!
Как выяснилось, многие не знают, как сделать бегущую строку на страничке или сайте. А ведь бегущая строка здорово привлекает внимание посетителя! Восполним этот пробел.

Вот код моей бегущей строки, которую Вы видите в самом верху:
<marquee scrollamount="2" scrolldelay="10"
truespeed="truespeed" width="100%">
<span style="color: red; font-size: 18pt;
"Ударим автопробегом по бездорожью!</span>
</marquee>

Дам небольшую справку по тегу <marquee>

Описание


Тег <marquee> создает бегущую строку на странице. На самом деле содержимое
контейнера <marquee> не ограничивается строками и позволяет перемещать
(скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

В качестве иллюстрации покажу, как в качестве бегущей строки можно использовать рамку с моим кодом.
<marquee scrollamount="2" scrolldelay="10"
truespeed="truespeed" width="100%">
<span style="color: red; font-size: 18pt;
"Ударим автопробегом по бездорожью!</span>
</marquee>

А вот я вставляю картинку:

Синтаксис


<marquee>...</marquee>

Атрибуты


behavior       - Задает тип движения содержимого контейнера <marquee>.
bgcolor         - Цвет фона.
direction       - Указывает направление движения содержимого контейнера <marquee>. 
height           - Высота области прокрутки.
hspace          - Горизонтальные поля вокруг контента.
loop               - Задает, сколько раз будет прокручиваться содержимое.
scrollamount - Скорость движения контента.
scrolldelay    - Величина задержки в миллисекундах между движениями.
truespeed     - Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.
vspace          - Вертикальные поля вокруг содержимого.
width             - Ширина области прокрутки.

Замечание. Тег <marquee>  может не работать в некоторых браузерах.

Удачи!



30 коммент.:

Людмила SantushAveiro комментирует...

О, как интересно! Сейчас пойду попробую сделать. Спасибо, Николай

Kartavtseva Elena комментирует...

Интересно! Я уже нашла один сайт, где можно без заморочек, так сказать на автомате сделать себе бегущую строку и не только, но у вас,Николай, тоже простое решение вопроса. Спасибо за урок!

Николай комментирует...

Всегда пожалуйста!

Anna-reschetcko комментирует...

Добрый день, Николай! Очень интересная статья. Конечно, она привлечёт внимание посетителей. Но у меня, как всегда, есть вопросы. Я правильно поняла, что я могу взять ваш код, изменить текст, вставить её на блог, и строка будет работать? Теперь ещё одно. А если я возьму картинку, то как мне вставить этот код тогда? Если можно, то напишите пошагово, что нужно сделать для "особо одарённых". Примером, это будет цветок розы.Очень буду ждать ответа. Спасибо и удачи!!!

Николай комментирует...

Картинку я сделал, посмотрите выше. Код, который я вставил:

 Сам цветок я поместил на blogspot - поэтому такой длинный адрес у меня.

Inna Nemidova комментирует...

Буду пробовать, давно нужна бегущая строка, а вот в статью получится? Кто пробовал?

Anna-reschetcko комментирует...

Николай, напишите, пожалуйста, пост о том, как установить на блог рубрику "Присоединяйтесь к блогу". Спасибо. Удачи.

Anna-reschetcko комментирует...

Николай,  огромное спасибо за ответ. Но я ещё раз спрошу вас. А вот тот код, который вы дали по розе, его нужно вставить на страницу и будет роза или нужно ещё что-то дополнительно создавать. Просто я не совсем поняла, куда нужно вставлять то, что вы написали  в скобках. Поясните ещё раз. Извините меня, что я вас беспокою, возможно для вас, бестолковыми вопросами. Всего вам доброго. 

Николай комментирует...

Анна! Картинка розы просто уже есть у меня.  А вот придумал я объяснение, которое, по-моему, будет Вам понятно.
1. Вставьте любую картину, которая у Вас есть, на свою страничку.
2. перейдите в HTML - редактор.
3. Заключите Вашу картинку в теги &ltmarquee> и &/ltmarquee>
4. Сохраните и смотрите результаты.

Если все правильно сделали - будет Вам счастье!

Николай комментирует...

Если поддерживается HTML, то все получится. 

Николай комментирует...

Пожалуйста!

Anna-reschetcko комментирует...

Николай, вот что у меня получилось:< marguee>[caption id="attachment_3430" align="aligncenter" width="300" caption="Cvetok_"][/caption], но цветок не бежит. Где ошибка?

Anna-reschetcko комментирует...

Николай, ещё раз, там не всё отобразилось:  


< marguee>[caption id="attachment_3430" align="aligncenter" width="300" caption="Cvetok_"][/caption] < marguee>, но цветок не бежит. Где
ошибка?  

Николай комментирует...

Анна, закрывающий  marguee без слеша.

Елена комментирует...

Здравствуйте у меня наверно не поддерживается 
HTML, ничего не получилось... но все равно спасибо очень интересно было почитать и попробовать.

Зоя комментирует...

Николай, а с текстом как поступать? Я взяла ваш код, изменила текст, остальное все оставила. Но у меня плыла на сайте только вторая строчка кода, а не нужный текст. Что не так я сделала? Можно пошагово объяснить, как создать бегущую строчку с текстом, а не просто пример.

Николай комментирует...

Приведите, пожалуйста, Ваш текст и Ваш код. 

Зоя комментирует...

 Код я брала ваш целиком, а текст вписала свой. Но ничего не получилось. У меня на сайте плыла только вторая строчка вашего кода серым цветом и все.Мне как раз непонятно, откуда я должна взять код. Объясняю:
Я хочу написать текст бегущей строки. Где я код пишу, где беру цвет, размер, скорость движения текста и  т. д.  В какой то программке?
Хочу понять смысл всего того, что я должна сделать. А не просто слепо вставлять набор значков.

Anna-reschetcko комментирует...

Николай, добрый день. Видео ещё не смотрела. А по картинке я вам отослала в комментариях свой код, который у меня получился, когда я сделала так,  как вы написали мне, но картинка моя не побежала. Я просила посмотреть, где у меня ошибка. Если это возможно, поправьте и вышлите мне в комментариях. Я оставила вашу розу как картинку, там её адрес вставлен. Я отослала даже дважды, так как один раз отобразилось не всё.Этот комментарий на статье «Как сделать бегущую строку». Жду продолжения разговора с вами. Спасибо!!! Уже увидела ответ. Сейчас попробую ещё раз. Обязательно вам напишу о результате. Смотрите, Николай, как с моей лёгкой руки пошли комментарии на странице. Ура!!!

Anna-reschetcko комментирует...

Николай, не получилось снова. Стоит картинка, не двигается. Я вставила её в HTML перед текстом моим, обновила, но...увы!!! Вот что у меня получилось:
[caption id="attachment_3430" align="aligncenter" width="300" caption="Cvetok_"][/caption] где моя ошибка? извините за назойливость, но хочется уже в конце концов разобраться. Можете зайти на мою страницу "Женщина-торнадо...что это? там я пытаюсь поставить бегущую розу.

Anna-reschetcko комментирует...

Николай, добрый день! Вы знаете у меня появилась вот такая запись:Ошибка RSS: A feed could not be found at http://blogsearch.google.com/blogsearch_feeds?scoring=d&ie=utf-8&num=10&output=rss&partner=wordpress&q=link:http://uspehavsem.ru/ Что мне нужно сделать, как исправить и чем эта ошибка мне грозит? Если возможно, помогите разобраться, только как для новичка!!!! спасибо!

Anna-reschetcko комментирует...

Николай, помогите мне закончить мой вопрос по картинке, как бегущая строка. Я вам выслала то, что у меня получилось, но картинка стоит и не бежит.Я хочу поставить на странице "Женщина-торнадо...что это?"Там стоит роза, но не движется.Почему?Где ошибка???? Спасибо заранее.

Андрей комментирует...

Класс! Бегущая строка это Просто Super!  Вот если-бы Вы ещё подсказали как вставить голос в exit pop-up -> нигде не могу найти. Большое спасибо Николай.

Анатолий комментирует...

Здравствуйте. Подскажите как сделать что бы текст бегущей строки шел с txt файла или другого файла и можно ли это без задействования php спасибо.

Анатолий комментирует...

гладкий текст 
Здесь находится ваш текст.

Анатолий комментирует...

нашел небольшое решение своей проблемы. Как сделать что бы текст бегущей строки брался из файла. Ну у меня получилось пока что только при помощи JavaScript и так перед мы пишем тоесть у нас получается полный такое

  

далее в текстовом файле который просто создаем пишем строчку document.write( " ваш текст готов "); 
и все. сохраняем его как txt.js и кладем в корень. 

Николай комментирует...

ЗдОрово, Анатолий! Мне нравится!

Николай комментирует...

Этим я не занимался, поэтому на Ваш вопрос ответить не могу.

Нурик комментирует...

сильно не пинайте новичок...
1. В main.tpl добавил код {custom category="1,2,3,4,5,6,7" template="customtemplate" aviable="global" from="0" limit="5" cache="no"}
2. в шаблоне customtemplate.tpl : {date} [full-link]{title}[/full-link]
3. css:
.marg_box {display:inline;padding:0 10px;}/* отступ блоков с новостями */
.marg_box span {padding:0 8px 0 0;} /* отступ даты от заголовка */

и так... не могу сдесь установить скорость движения, размер шрифта, и при наведении курсора останавливался
плз помогите...

Николай комментирует...

Честно говоря, я из Ваших объяснений ничего не понял. Вижу только, что скорость движения(scrollamount) нигде не задана, размер фонта тоже не задан.

Отправить комментарий