На сайте необходима бегущая строка с актуальной информацией,
после месяца поисков имеется самописный скрипт, добрый человек помог. Проблема всех найденых готовых скриптов одна - необходимо задавать жесткие размеры анимированного слоя и отказ от ресайза окна.
Тот скрипт, что написал добродетель - работает и с ресайзом и с % шириной, но 1 неприятный момент, если содержимое (текст бегущей строки) изначально большой, то он "распирает" страницу и как итог - горизонтальная прокрутка. И уж в пику тегу marquee здорово было бы зациклить прокрутку не дожидаясь ухода последнего символа ("строка + разделитель + строка", т.е. "
самый полноценный скрипт бегущей строки | Это на сегодняшний день".
Вот имеющийся у меня код:
<script>
// настройка скорости
delay = 30;
step = 2;
is_start = true;
fullwidth = 0;
cpos = 0;
scrollw = 0;
function start_scroll()
{
var scrolltext = document.getElementById('scrolltext');
var scroll = document.getElementById('scroll');
fullwidth = scrolltext.offsetWidth;
scrolltext.style.left = scroll.offsetWidth;
scrollw = scroll.offsetWidth;
scrolltext.style.position = 'relative';
myinterval = setInterval(do_scroll, delay);
}
function do_scroll()
{
var scroll = document.getElementById('scroll');
var scrolltext = document.getElementById('scrolltext');
if (is_start)
{
cpos = scroll.offsetWidth;
scrolltext.style.left = cpos;
is_start = false;
}
else
{
cpos -= step;
scrolltext.style.left = cpos;
if (cpos < -fullwidth) { is_start = true; }
}
}
function stop_scroll()
{
clearInterval(myinterval);
}
function continue_scroll()
{
myinterval = setInterval(do_scroll, delay);
}
function do_resize()
{
var scroll = document.getElementById('scroll');
newscrollw = scroll.offsetWidth;
if (cpos >= 0) { absstp = scrollw - cpos; }
else { absstp = scrollw + Math.abs(cpos); }
oldprc = absstp / (scrollw + fullwidth);
newlen = newscrollw + fullwidth;
newabsstp = newlen * oldprc;
if (newabsstp <= newscrollw) { cpos = newscrollw - newabsstp; }
else { cpos = -(newabsstp - newscrollw); }
scrollw = newscrollw;
}
</script>
<style>
#scroll {width: 100%;
background-color: f0f0f0;
white-space: nowrap;
overflow: hidden;
position: relative}
#scrolltext {position: absolute}
</style>
<body onload='start_scroll()' onresize='do_resize()'>
<div style='width:100%'>
<div id='scroll' onmouseover='stop_scroll()'
onmouseout='continue_scroll()'>
<div id='scrolltext'>
Здесь скроллируемый текст,
его скорость настраивается,
в нем есть <a href=''>ссылка</a>,
при наведении мыши он останавливается
</div>
</div>
</div>
</body>