Бегущая строка на основе jQuery , для текста , изображенй , информеров и ленты RSS импорта . Настраиваемые направление и скорость движения содержания . |
Главная страница сайта . |
Исходный вид действующего примера бегущей строки . Для работы бегущей строки требуется установка дополнительного jQuery скрипта . Cкрипт устанавливается на странице размещения HTML бегущей строки .
Содержание бегущей строки . Содержание бегущей строки . Содержание бегущей строки
Изначальный HTML бегущей строки .
<script type="text/javascript">
$(document).ready(function(){$jScroller.add("#src_con","#scr_oll","left",8, true);$jScroller.start(); });
</script>
<div id="src_con"><div id="scr_oll">
Содержание бегущей строки . Содержание бегущей строки . Содержание бегущей строки
</div></div>
Начальная CSS бегущей строки .
#src_con {position: relative; width: 100%; height: 20px;}
#scr_oll {width: 100%;}
В качестве содержания бегущей строки могут выступать не только текст но и изображения . Направление движения содержания настраивается в скрипте бегущей строки .
HTML бегущей строки с содержания в виде изображений .
<script type="text/javascript">
$(document).ready(function(){$jScroller.add("#src_con","#scr_oll","left",8, true);$jScroller.start(); });
</script>
<div id="src_con"><div id="scr_oll">
<img alt="" src="https://runettex.clan.su//FPC/test.gif"><img alt="" src="https://runettex.clan.su//FPC/test.gif"><img alt="" src="https://runettex.clan.su//FPC/test.gif">
</div></div>
Направление движения настраивается в скрипте бегущей строки ( выделено цветом ) .
<script type="text/javascript">
$(document).ready(function(){$jScroller.add("#src_con","#scr_oll","left",8, true);$jScroller.start(); });
</script>
Значения для определения направления движения содержания бегущей строки
left - движение справа на лево
right - движение cлева на право
up - движение наверх снизу
down - движение сверху вниз .
Скорость движения содержимого бегушей строки определяется значением скорости ( выделено цветом ) .
<script type="text/javascript">
$(document).ready(function(){$jScroller.add("#src_con","#scr_oll","left",8, true);$jScroller.start(); });
</script>
- Чем больше значение тем выше скорость перемещения содержания бегущей строки . Наименьшее возможное значение равно - 1 .
Так же в скрипте приутствует функция остановки движения кусором мыши при наведении на содержимое бегущей строки ( выделено цветом ) .
<script type="text/javascript">
$(document).ready(function(){$jScroller.add("#src_con","#scr_oll","left",8,true);$jScroller.start(); });
</script>
- Возможны два значения этой функции
true - остановка движения бегущей строки курсором разрешено
false - остановка движения бегущей строки курсором запрещено .
- В качестве содержимого бегущей строки моут использоваться системные коды информеров и RSS импорта . Данный вариант бегущей строки используется на сайте в качестве бегущей строки RSS импорта .
|
|
|
|
|
|