Новости Скрипты Онлайн сервисы Хитрости Гостевая книга Статистика сайта Реклама на сайте
UsefulScript.ruСкриптыТекстовые эффектыАвтоматическая прокрутка текста
44
157

Автоматическая прокрутка текста в блоке

Предлагаем Вам скрипт автоматической прокрутки (скроллинга) текста в блоке. Прокрутка (скроллинг) текста осуществляется в заданном направлении при наведении курсора мышки на одну из стрелочек (вверх или вниз).


Для наглядности работы предлагаемого скрипта, ниже расположен блок с текстом. Справа от блока расположены две стрелки: вверх и вниз. Если Вы наведете курсор мышки на одну из стрелок, то текст в блоке будет автоматически прокручен в указанном направлении. Если курсор убрать со стрелки, то автоматическая прокрутка текста будет остановлена.


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

Прокрутка текста.

Прокрутка текста html.

Автоматическая прокрутка текста.

Скрипт прокрутки текста.

Вертикальная прокрутка текста.

Скроллинг текста.

Можно вставлять любой текст, ссылки и изображения.







Для получения на Вашей страничке блока с автоматической прокруткой текста, подобного тому, что Вы можете наблюдать выше, добавьте на свою страничку следующий JavaScript код, отвечающий за прокрутку текста вверх и вниз:

JavaScript код:
<script type="text/javascript">
function 
move(id,spd) {
 var 
obj=document.getElementById(id);
 var 
max=-obj.offsetHeight+obj.parentNode.offsetHeight;
 var 
top=parseInt(obj.style.top);

 if ((
spd>0&&top<=0)||(spd<0&&top>=max)){
  
obj.style.top=top+spd+"px";
  
move.to=setTimeout(function(){ move(id,spd); },20);
 }
 else 
obj.style.top=(spd>0?0:max)+"px";
}
</script>

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

HTML код:
<table align="center">
<
tr><td width="500px">
<
div style="height:170px;border:1px solid black;position:relative;overflow:hidden;">
<
div id="block" style="left:5px;right:5px;top:3px;position:absolute;">
Здесь располагается тексткоторый будет прокручиваться при наведении курсора мышки
на одну из стрелочек 
(вверх или вниз).<br><br>
Можно вставлять любой текст, <a href="http://usefulscript.ru/">ссылки</a>
и изображения.<br>
<
img src="image/go_up.png" alt="">
</
div></div>

</
td><td width="20px" align="right">

<
img src="image/up.png" alt="" onMouseover="move('block',5)"
onMouseout="clearTimeout(move.to)">
<
br><br>
<
img src="image/down.png" alt="" onMouseover="move('block',-5)"
onMouseout="clearTimeout(move.to)">
</
td></tr>
</
table>

Внутри блока для прокрутки может располагаться любой текст и изображения.


Для изменения скорости прокрутки внутри блока Вы можете увеличить или уменьшить значение в onMouseover="move('block',5)".


Дата создания: 17:26:08 09.05.2012 г.
Дата обновления: 17:26:08 09.05.2012 г.
Посещений темы: 9740 раз(а).

Комментарии посетителей (всего 14 шт.):
Аркадий
-2
# 269
(15:32:47  25.08.2012 г.)

Сколько можно размещать скриптов автоматической прокрутки текста на странице? У меня второй не работает что делать?
Ответить

Administrator
1
# 270
(17:39:10  25.08.2012 г.)

Аркадий, блоков автоматической прокрутки можно делать сколько угодно. Для того чтобы работало несколько блоков на одной странице необходимо изменить id второго блока (например, id="block_2"). Так же необходимо в функциях onMouseover="move('block_2',5)" и onMouseover="move('block_2',-5)" указать id второго блока.
Ответить

Юрий
-2
# 1015
(11:00:28  03.08.2013 г.)

А можно ли сделать так, чтобы ещё и при нажатии на верхнюю стрелку переместиться в начало текстового блока, а на нижнюю - в конец, с сохранением функции прокрутки при наведении?
Ответить

Administrator
0
# 1017
(14:29:28  03.08.2013 г.)

Можно. Для этого добавьте еще одну функцию:
function jump(id,direction) {
var obj=document.getElementById(id)
var max=-obj.offsetHeight+obj.parentNode.offsetHeight
var top=parseInt(obj.style.top)
if (direction=="up") {obj.style.top=0+"px";}
else {obj.style.top=max+"px";}
}
Для верхней стрелки добавьте событие onclick="jump('block','up')", а для нижней onclick="jump('block','down')
Ответить

Юрий
-1
# 1019
(23:26:15  03.08.2013 г.)

Спасибо, работает. Только, как и в первом случае, если в текстовом блоке есть ссылки, то после перехода по ним (у меня просто ссылка на mp3 файл), текст начинает двигаться рывками. Глюк пропадает только после перезагрузки страницы. Браузер Opera 12.16. Есть какое-нибудь лекарство от этого?
Ответить

Administrator
0
# 1020
(16:42:11  04.08.2013 г.)

Боюсь это уже не исправить, т.к. если глянуть диспетчер задач, то скрипт сильно грузит процессор (особенно в Опере), от этого и рывки.
Второй Ваш вопрос вместе с ответом на него перенес на форум - Смена надписей и ссылок к ним.
Ответить

Константин
0
# 2345
(22:10:44  18.03.2015 г.)

Подскажите. Как сделать то же самое, только горизонтальной прокруткой?
Ответить

Administrator
0
# 2346
(23:36:10  18.03.2015 г.)

Из-за величины кода ответ перенес на форум в виде новой темы Горизонтальная прокрутка текста в блоке.
Ответить

Юрий
-1
# 2394
(12:53:11  16.04.2015 г.)

А как сделать, чтобы прокрутка начиналась автоматически вниз через некоторое время (3-5сек) после открытия страницы? Спасибо.
Ответить

Administrator
0
# 2395
(19:58:35  16.04.2015 г.)

Добавьте в конец JavaScript кода следующее:
function go() { move('block',-5); }
setTimeout(go, 3000);
Ответить

Марианна
0
# 2890
(05:06:46  10.12.2015 г.)

Спасибо большое! Только один вопрос. Прокрутка работает, только область окна слишком узкая. Как можно расширить?
Ответить

Administrator
0
# 2891
(22:35:25  10.12.2015 г.)

Вопрос решается легко. Ширина регулируется в строчке <tr><td width="500px"> при условии, что сама таблица не ограничена размерами внешнего блока.
Высоту можно задать в стиле блока DIV: <div style="height:170px; ...
Ответить

Артем
0
# 2988
(04:12:35  19.01.2016 г.)

Простите, не соображу куда добавить
function go() { move('block',-5); }
setTimeout(go, 3000);
для автопрокрутки. Ставлю перед </script> и ничего не происходит. Подскажите наглядно, если не затруднит.

И еще момент, нет стрелок. Их просто залить на сайт надо?
Спасибо заранее, ибо слаб я в этом, а такой скрипт необходим.
Ответить

Administrator
0
# 2989
(20:16:26  19.01.2016 г.)

Добавлять надо перед </script>. Обратите внимание, что скрипт начнет прокрутку через 3 сек. Тестируйте на пустой страничке, а уже потом встраивайте на сайт.
Изображения стрелок необходимо залить себе на сайт и прописать путь к ним в тегах img.
Ответить

Закрыть
Ваше имя:
337 + 10 =
Добавить комментарий к теме:
Ваше имя:
337 + 10 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Какие темы необходимо добавлять на сайт?


Mail.ru LiveInternet