|
|
|
|
Как сделать бегущий текстовый блок? Автор: Андрей Краснокутский Дата: 2011-04-14 Бегущий текстовый новостной блок.В этом уроке мы научимся делать бегущий блок текста. Текст движется снизу вверх. При наведении мышки текст останавливается. Такой блок удобен тем, что он легко масштабируется. Здесь можно использовать все html-теги в том числе и ссылки. Вы наверное уже заметили, что такой бегущий блок я использую на этом сайте, здесь я вывожу наиболее значимые события и новости. Этот блок у меня так и называется Новости сайта. Пример работы скрипта Вы видите ниже и немного выше и правее: Реализуется такой блок очень легко. В нужное место своей web-страницы вставляете код Листинга 1. Давайте сначала посмотрим код, а затем разберемся: Листинг 1.
Итак, теперь давайте разбираться. Что здесь Вам можно изменять и что на что влияет? Визуально весь код Листинга 1 разбит на 5 абзацев, сделано это для удобства зрительного восприятия. Смотрим 1-й абзац кода. Значение scrollAmount="5"цифра в кавычках, указывает на скорость перемещения текста. Как видите в примере указана цифра 5, чем она больше, тем быстрее движется текст. Например в блоке Новости сайта (смотрите выше и правее) стоит значение 2. Значение width="350"определяет ширину блока, в данном случае указано 350 пикселей. Значение height="150"определяет высоту блока, в данном случае 150 пикселей. Все эти числовые значения Вы можете смело изменять на своё усмотрение. Больше ничего трогать не нужно! Абзацы 2, 3 и 4. Это собственно говоря и есть бегущие новости, каждый абзац - отдельная новость или текстовый блок. Добавлять таких абзацев можете сколько угодно, в данном случае у меня их три. Разберем один из абзацев, например 2-й: <div class='beg_stroka'> <strong>19.02.2011</strong><br> Весь абзац заключен в теги <div> </div>, но это не принципиально, просто для удобства, можно использовать например теги <p> </p> - это на Ваше усмотрение. Внутри открывающего тега <div> прописан класс CSS. А дальше идет обычный текст. И еще прописана ссылка тегом a href . Как видите всё очень просто, обычный html-код. Добавляете таких абзацев сколько нужно (простым копированием - вставкой) и делаете нужное количество новостей. Последний (5-й) абзац в Листинге 1</marquee>- это просто закрывающий тег, его трогать не надо! Вот и всё. Копируйте, редактируйте свой текст и оформление, и бегущий текстовый новостной блок готов.
Всего Вам доброго.
Читайте так же: Скрипт: Фоновая музыка на сайте с панелью управления. Создание электронных книг по Вашим заказам. Что полезного нам может дать биржа покупки и продажи ссылок Sape? Как создать RSS-канал новостей на сайте? Как сделать красивую 3D обложку. Практическое руководство. Сайт своими руками от А до Я. Пошаговый Обучающий Видео Курс.
Просмотров: 17964 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Vlad Спасибо Андрей. Не только напомнили о такой возможности для сайта, но и расширили мои знания. Комментарии добавил(а): Прохожий Наконец-то дождался! Спасибо Андрей! Как-то писал Вам на почту как раз по этому новостному блоку:) Здорово, что не забыли рассказать об этом посетителям сайта. Давно хотел сделать такую же штуковину у себя на сайте. Комментарии добавил(а): Начинающий сайтостроитель Оксана Спасибо за скрипт, так приятно узнавать что то новенькое. Комментарии добавил(а): Елена Ой,как здорово! Обязательно попробую сделать подобное у себя. Спасибо, Андрей! Комментарии добавил(а): alex а это только для html5 ??? а если у меня xhtml Комментарии добавил(а): АндрейК Alex , вся прелесть этого скрипта в том, что он работает практически везде (в отличии от многих других) и в html4 и в html5. Вы наверное заметили, что у меня на сайте помесь: PHP, CSS и HTML.... и скрипт работает! Комментарии добавил(а): Ольга Супер Комментарии добавил(а): Сергей (ессентуки) Спасибо за урок....а вообще можно подключить на сайт ....RSS Новости сайта Комментарии добавил(а): Олег Гузь Спасибо, Андрей, за скрипт и за очень доходчивый комментарий! Обязательно испытаю! Комментарии добавил(а): Ирина Замечательный скрипт. Обязательно использую в своем блоге - http://misuperdomen.ru/. Спасибо. Комментарии добавил(а): Ирина Спасибо, Андрей! Как всегда нужная информация и скрипт. Обязательно установлю на своем блоге: http://startvzlet.ru Комментарии добавил(а): Ирина Ура!!! Я сделала это! И всего за 5 минут! Огромное спасибо, Андрей! Посмотрите: http://startvzlet.ru Комментарии добавил(а): Наталия Мне очень нравится! Большое спасибо за скрипт и за Ваш труд! Будем ждать от Вас новых полезностей. Комментарии добавил(а): jenia Спасибо за скрипт, нету слов )) Комментарии добавил(а): Константин Отличная штука!!! Спасибо, Андрей! Комментарии добавил(а): Константин Класс! Обязательно использую. Спасибо за то, что делитесь с нами своими работами. Успехов и удачи. Комментарии добавил(а): Olga Спасибо за скрипт, он мне очень был нужен. Обязательно установлю его на своем свайте. Комментарии добавил(а): Константин Отличная штука!!! Спасибо, Андрей! Комментарии добавил(а): Владимир Спасибо автору! Это один из лучших ресурсов данной тематике и по содержанию, и по желанию поделиться своими знаниями. Так держать! Комментарии добавил(а): Александр Отлично Комментарии добавил(а): Татьяна Спасибо, Андрей! Здорово! Комментарии добавил(а): Лариса Спасибо. У меня всё опять получилось. А можно сделать так, чтобы двигалось не по вертикали, а по горизонтали? Еще раз, спасибо. Комментарии добавил(а): Ольга Спасибо огромное!Я Ваша подписалась давно на Ваши новости!Подскажите,как в коде сделать тоже строку с красным цветом,очень надо! Комментарии добавил(а): Ольга Спасибо огромное!Я Ваша подписалась давно на Ваши новости!Подскажите,как в коде сделать тоже строку с красным цветом,очень надо! Комментарии добавил(а): АндрейК Ольга, пропишите в таблице CSS отдельный стиль и придайте любой цвет Комментарии добавил(а): Алексей. Спасибо, у себя поставил, всё нормально работает и понятно разжевывали для чайника Комментарии добавил(а): Николай Благодарю Вас и искренне признателен за Вашу работу!!! Комментарии добавил(а): Дмитрий В этом скрипте можно использовать картинки? И как сделать, чтобы они перемещались по горизонтали? Спасибо! Комментарии добавил(а): Ирина Как раз то, что искала. Нужна новостная лента, не знала, как сделать ее движущейся. Теперь знаю :-) БлагоДарю за помощь! Буду реализовывать. http://animangalife.ru/ Комментарии добавил(а): irina Спасибо, это может пригодится, сайт заполняется и посетителю, конечно будет легче с таким информером, спасибо! http://dobroan.jim.com я только учусь! Комментарии добавил(а): Алекс Подскажите, как можно замедлить скорость (выставить менее 1) Комментарии добавил(а): дмитрий А у меня чего то не получилось, блок вставил и новости есть, только не бежит ничего, пришлось удалить Комментарии добавил(а): Сергей Это хорошо! А как сделать так, чтобы элементы шли сразу один за одним, без пустого пространства? Комментарии добавил(а): Андрей Я даже не представлял, что все так просто. Уже поставил сайт в закладки. Буду заходить и изучать. Комментарии добавил(а): Анна Любимова Огромное спасибо автору сайта! Вы не представляете, как долго и трудно я искала способ сделать вот такой новостной блок! ну просто кучу ерунды перелопатила. И убила пару недель. Огромное, еще раз, спасибо! Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |