Бегущие строки и изображения в разных направлениях движения



Бегущие строки и изображения на фоне, в рамках и в разных направлениях движения


Здравствуйте дорогие гости и читатели моего блога. Сегодня информация о бегущих строках и изображениях в разных направлениях, с заданной Вами скоростью движения, с заданным цветовым фоном и возможности установить ширину и высоту фона или блока.

Не учи меня жить-лучше помоги материально. Цитата из кинофильма "Москва слезам не верит"

<marquee>простая бегущая строка</marquee></div>

текст бегущей строки справа налево

<marquee behavior="scroll" height="" scrollamount="3" width="">текст бегущей строки справа налево</marquee>

текст бегущей строки слева направо
<marquee behavior="scroll" direction="right" height="100" scrollamount="7" width="500">текст бегущей строки слева направо</marquee>

текст бегущей строки сверху вниз
<marquee behavior="scroll" scrollAmount="3" width="" height="" direction="down">текст бегущей строки сверху вниз</marquee> 

текст бегущей строки снизу вверх
<marquee behavior="scroll" direction="up" scrollAmount="3" width="" height="">текст бегущей строки снизу вверх</marquee> 

текст бегущей строки влево вправо

<marquee behavior="alternate" scrollAmount="5" width="" height="">текст бегущей строки влево вправо</marquee>

текст бегущей строки,останавливается при наведении мыши

<marquee behavior="scroll" align="middle" direction="left" scrollamount="3" onmouseover="this.stop()" onmouseout="this.start()" style="color:#0f66bd;">текст бегущей строки, останавливается при наведении мыши</marquee>

<marquee width="300px" height="20px">можно изменить размер блока строки</marquee>


Бегущие строки на заданном Вами фоне и размерах блока

<marquee bgcolor="#EEEEEE" width="300px" height="20px">можно изменить фон блока</marquee>


<marquee direction="right"  bgcolor="#FFDEAD" width="300px" height="20px">бегущая строка слева направо</marquee>


<marquee behavior="alternate" bgcolor="#eeeeee" width="300px" height="20px" >постоянное движение</marquee>


<marquee direction="up" bgcolor="#EEEEEE" width="150px" height="50px">бегущая строка снизу вверх</marquee>


<marquee direction="down" bgcolor="#00FF33" width="250px" height="50px">бегущая строка сверху вниз</marquee>


Ваши картинки в рамках   

<img src="http://адрес картинки" style="border: 3px #0e5198 double;" /></div>
 двойная рамка с картинкой


<img src="http://адрес картинки" style="border: 3px #9b089e dashed;" />
 пунктирная рамка

<img src="http://адрес картинки" style="border: 3px #0e5198 groove;" /> 
вогнутая рамка

<img src="http://адрес изображения" style="border: 3px #0e5198 ridge;" />
 выпуклая рамка

<img src="http://адрес изображения" style="border: 3px #0e5198 solid;" /> 
сплошная рамка

<img src="http://адрес изображения" style="border: 3px #0e5198 dotted;" /> 
точечная рамка


ваш текстваш текстваш текстваш текст
<marquee bgcolor="pink" width="25%">ваш текст</marquee><marquee bgcolor="aqua" width="25%" direction="right">ваш текст</marquee><marquee bgcolor="silver" width="25%">ваш текст</marquee><marquee bgcolor="aqua" width="25%" direction="right">ваш текст</marquee>

Настройки

scrollamount="3"-скорость строки или изображения; width="300px" height="20px"-ширина и высота фона блока; border: 3px-размер окантовки рамки; bgcolor="#EEEEEE"-цвет фона блока;






Автор статьи ✎ Olga Protasova Выпуск ✹ 2/06/2014 Ярлыки ►


Открыть комментарии →

18 коммент. :

  1. Подскажите, а как движущую картинку (строку) вставить На картинку..нена фон а на картинку. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Зоя Крайсик здравствуйте. Уточните, Вы хотите на картинку вставить бегущую строку? или бегущая картинка с описанием?

      Удалить
    2. Олечка спасибо за ответ! я хочу на Новогоднюю картинку вставить шагающую Новогоднюю собачку, к примеру...или картинка отдельно встает и собачка отдельно...или только собачка идет, картинки нет. всяко пробовала...никак!

      Удалить
    3. Зоя, посмотрите статью, если не подходит, напишите, подумаем.

      http://www.bdblogov.ru/2013/09/blog-post_27.html

      или ищите в меню-содержание-ярлык "дизайн", статья номер 11.

      Удалить
    4. Олечка! посмотрела...там все движется...а мне надо чтоб картинка стояла (моя).а на ней двигалась (собачка),к примеру...Спасибо!

      Удалить
    5. Зоя, посмотрите пример в тестовом блоге по ссылке:

      https://demoblog-v.blogspot.com/

      Справа собачка на новогоднем фоне без свойства бегущей строки, бег на месте. Над сообщением используется свойство "marquee"

      Удалить
    6. Верно Оля! Это мне и надо...а где взять кодик...он был бы Эталоном мне... свои значения подставила бы...Спасибо!

      Удалить
    7. Зоя, HTML код

      <div style="background: url(адрес фоновой картинки); border:2px double #f00;width:auto;height:150px;">


      <marquee behavior="scroll" direction="right"><img src="адрес бегущей картинки"; width="60" height="60"style="padding: 90px 40px 40px 80px;"/></marquee></div>

      Значения padding - положение картинки вверх/вниз, справа/слева.

      Удалить
    8. Олечка! не получается.....собачка идет, а картинки нет.. вставила вам коды картинок- не прошло...

      Удалить
    9. Зоя, адрес картинки должен быть https, http сейчас не пройдет. Пришлите скриншот кода, я посмотрю.

      Удалить
    10. Олечка вот картинки <img src="http://img1.liveinternet.ru/images/attach/d/0/139/628/139628085_WinterLandscape640x480.jpg" width="640" height="480" alt="Winter-Landscape-640x480 (640x480, 355Kb)" />
      <img src="http://img0.liveinternet.ru/images/attach/d/0/139/628/139628086_177159.gif" width="141" height="250" alt="177159 (141x250, 209Kb)" />

      Удалить
    11. Зоя, удалите свойство alt="Winter-Landscape-640x480 (640x480, 355Kb)". Я у себя вставила, обе картинки отображаются.

      Удалить
    12. Олечка! Спасибо за Ваше терпение...другой быпослал по дальше))) вот скрин...не получается...собачка идет...картинки нет...начало какой тэг нужен: <table width="840" height="480" style="border..или сразу с картинки с вашего генератора или с Яндекса,к примеру...или моего (ЛиРу)

      Удалить
    13. Зоя, посмотрите пример с Вашими картинками

      https://mydomcomputer.blogspot.com/

      Вот код

      <div style="background: url(http://img1.liveinternet.ru/images/attach/d/0/139/628/139628085_WinterLandscape640x480.jpg);width:640px;height:480px;">

      <marquee behavior="scroll" direction="right"><img src="http://img0.liveinternet.ru/images/attach/d/0/139/628/139628086_177159.gif"; width="200" height="200"style="padding: 220px 40px 40px 80px;" /></marquee></div>

      Удалить
    14. Оленька! Как Классно!...а че я такая тупая что ли?! а по ссылке не войти...надо Ваше разрешение! код взяла...можно и др. делать по-этому принципу?! ск-ко хитростеЙ, кроме Вас никто не писал об этом. Спасибо!

      Удалить
    15. Зоя, совсем забыла, демо блог недавно создала, доступ был закрыт, открыла в настройках для всех.

      Вариантов можно придумать больше, пофантазировать. Обращайтесь, Удачи.

      Удалить
    16. Оленька! С Праздником!
      [flash=650,450,http://www.yapfiles.ru/files/1845302/_rozhdestvom.swf]
      Хочу спросить, а какой тэг нужен, к примеру для верха (самолет лети), к примеру...Спасибо!

      Удалить
    17. Зоя, здравствуйте. И Вас с Праздником! А Вы адрес картинки самолета вставляли в код? К примеру прежняя картинка идущей собачки, но движение на месте. Используя тэг "marquee" она у нас идет. Ваша ссылка нерабочая.

      Удалить


Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *