Найти на сайте

Создание валидной бегущей строки.

+20
4.69K
  2. Блоги
  3. Создание валидной бегущей строки.
Захотелось вот мне как-то "оживить" сайт и решил сделать вывод новых фотографий в виде бегущей строки, но чаще всего, когда нам нужно было сделать бегущую строку на сайте, мы пользовались тегом MARQUEE. Однако, он не является валидным, поэтому не проходит проверку соответствия стандартам.
Положительным моментом моего примера является то, что можно настроить скорость бегущей строки, ее направление и остановку или ее отсутствие при наведении курсора.
Шаг 1.
Подключил jquery и плагин jscroller в template.php своего шаблона между тегами <head>:
  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  2.         <script type="text/javascript" src="jscroller-0.4.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5. // Add Scroller Object
  6. $jScroller.add("#scroller_container","#scroller","left",10, true);
  7. // Start Autoscroller
  8. $jScroller.start();
  9. });
  10. </script>
Значение left в данном случае показывает направление движения бегущей строки налево. Вместо него можно также прописать right, up, down, что соответственно будет являтся направлениями направо, вверх и вниз.
Скорость здесь равна 10. Это значение можно изменить по вашему желанию.
Убрав параметр true мы удалим свойство остановки бегущей строки при наведении курсора.
Шаг 2.
В css-файл шаблона добавил свойства блока с бегущей строкой:
  1.  #scroller_container {
  2. position: relative;
  3. width: 600px;
  4. height: 60px;
  5. overflow: hidden;
  6. }
  7. #scroller {
  8. white-space: nowrap;
  9. line-height: 60px;
  10. font-size: 36px;
  11. font-family: Verdana, Arial, Helvetica, sans-serif;
  12. }
Шаг 3.
Для вывода новых фото применил module-simple.tpl в котором прописал следующий код:
  1.  
  2. <div id="scroller_container">
  3. <div id="scroller">
  4. {$mod.body}
  5. </div>
  6. </div>
Ну и в админке в настройках модуля Новые фото подключил module-simple.tpl
Новые фотографии в валидной бегущей строке готовы!
Естественно все это можно использовать для вывода любых модулей.
Удачной реализации на Ваших сайтах!
Ну вроде все понятненько написал-описал.
Необходимые файлы Здесь
Каталог файлов в универсальном каталоге-продолжение...
Безопасность админ.центра.
+1
imprint imprint 12 лет назад #
куда копировать файлы?
+1
Александр Александр 12 лет назад #
файлы скопировать можно в любое место на сайте,главное правильно прописать путь к ним.
+1
imprint imprint 12 лет назад #
конфликт с таб закладками....
+1
Александр Александр 12 лет назад #
Странно,у меня все норм работает,без конфликтов.
0
Бергал Бергал 12 лет назад #
а как сделать, чтобы плавно двигалось, а не рывочками? а вообще супер. только вчера собирался поискать на сайте что-то подобное.
0
Александр Александр 12 лет назад #
Если сделать скорость поменьше (например 1), то будет казаться, что строка идет плавнее.
0
lezginka.ru lezginka.ru 12 лет назад #
отличная работа Александр!
+
0
lezginka.ru lezginka.ru 12 лет назад #
а что нужно менять, чтобы оное превратилось в обычную бегущую строку ?
0
-=NEXT=- -=NEXT=- 12 лет назад #
В упор не вижу демо...
0
reload reload 12 лет назад #
Видать вы немного опоздали)
Да там и ничего особенного, просто картинки движутся как обычная бегущая строка) но эффект есть)
0
reload reload 12 лет назад #
Чето у меня бегущая строка появилась, тока совсем не так как надо))
...в самом верху на главной, точка какая то бегает и фото с дублировались.
0
Ne OS Ne OS 12 лет назад #
Удалось решить проблему? У меня тоже самое.
0
Ne OS Ne OS 12 лет назад #
Удалось решить проблему? У меня тоже самое.
0
Ne OS Ne OS 12 лет назад #
Удалось решить проблему? У меня тоже самое.
0
reload reload 12 лет назад #
А можно как то убрать пробелы? зациклить непрерывно... сейчас после окончания строки, происходит пауза пока строка полностью не исчезнет...
0
Александр Александр 12 лет назад #
можно,в настройках вывода фото.увеличь кол-во фото,наприм 10шт
0
reload reload 12 лет назад #
Количество то я и увеличил... Но это не выход - после последней и до первой - пустое место...
+2
iParovoz iParovoz 11 лет назад #
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
вот это лишнее, имхо

Еще от автора

Tab

Tab

Решил вот сделать таб-закладки на сайте.Выдернул скрипт со старого своего проекта ну и вставил на новый проект.
16
Каталог файлов в универсальном каталоге-продолжение...

Каталог файлов в универсальном каталоге-продолжение...

Понадобилось вот мне сделать на сайте каталог файлов.Нашел хороший вариант Каталога файлов.Но...
33
Безопасность админ.центра.

Безопасность админ.центра.

Доброго времени суток, уважаемые! Это моя первая запись (надеюсь не последняя),поэтому прошу строго не судить. И так,приступим к защите нашего админ.
8

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.