Показать сообщение отдельно
  #1 (permalink)  
Старый 28.09.2008, 14:01
Новичок на форуме
Отправить личное сообщение для vasiliyb Посмотреть профиль Найти все сообщения от vasiliyb
 
Регистрация: 28.09.2008
Сообщений: 7

Помогите сделать полноценную замену тэгу <marquee>
На сайте необходима бегущая строка с актуальной информацией,
после месяца поисков имеется самописный скрипт, добрый человек помог. Проблема всех найденых готовых скриптов одна - необходимо задавать жесткие размеры анимированного слоя и отказ от ресайза окна.
Тот скрипт, что написал добродетель - работает и с ресайзом и с % шириной, но 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>
Ответить с цитированием