Автоматическая прокрутка текста в блоке
Предлагаем Вам скрипт автоматической прокрутки (скроллинга) текста в блоке. Прокрутка (скроллинг) текста осуществляется в заданном направлении при наведении курсора мышки на одну из стрелочек (вверх или вниз).
Для наглядности работы предлагаемого скрипта, ниже расположен блок с текстом. Обратите внимание на расположенные справа от блока две стрелки: вверх и вниз. Если Вы наведете курсор мышки на одну из стрелок, то текст в блоке будет автоматически прокручен в указанном направлении. Если курсор убрать со стрелки, то автоматическая прокрутка текста будет остановлена.
|
Для получения на Вашей страничке блока с автоматической прокруткой текста, подобного тому, что Вы можете наблюдать выше, добавьте на свою страничку следующий JavaScript код, отвечающий за прокрутку текста вверх и вниз:
<script type="text/javascript">
function move(id, spd) {
var obj = document.getElementById(id);
var max = parseInt(obj.parentNode.offsetHeight - obj.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>В том месте Вашей странички, где будет располагаться блок с прокручиваемым текстом, поместите код блока:
<table style="margin: 0 auto;">
<tr><td style="width: 500px; 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>
</td><td style="width: 20px; text-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)".
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
function jump(id, direction) {
var obj = document.getElementById(id);
var max = parseInt(obj.parentNode.offsetHeight - obj.offsetHeight);
var top = parseInt(obj.style.top);
if (direction=="up") obj.style.top = "0px";
else obj.style.top = max + "px";
}
Для верхней стрелки добавьте событие onclick="jump('block', 'up')", а для нижней onclick="jump('block', 'down')
Второй Ваш вопрос вместе с ответом на него перенес на форум - Смена надписей и ссылок к ним.
function go() { move('block', -5); }
setTimeout(go, 3000);
function go() { move('block', -5); }
setTimeout(go, 3000);
для автопрокрутки. Ставлю перед </script> и ничего не происходит. Подскажите наглядно, если не затруднит.
И еще момент, нет стрелок. Их просто залить на сайт надо?
Спасибо заранее, ибо слаб я в этом, а такой скрипт необходим.
Изображения стрелок необходимо залить себе на сайт и прописать путь к ним в тегах img.
JavaScript код замените на такой:
function move(id, spd) {
var obj = document.getElementById(id);
var max = parseInt(obj.scrollWidth - obj.parentNode.offsetWidth);
var left = parseInt(obj.style.left);
if ((spd<0&&max+left>=0)||(spd>0&&left<=0)){
obj.style.left = left + spd + "px";
move.to=setTimeout(function(){ move(id,spd); }, 20);
}
}