Xpoint
   [напомнить пароль]

Скрипт бегущей строки новостей для 100% ширины

Метки: [без меток]
2008-09-06 16:13:26 [обр] Василий[досье]
Очень хочется отойти от стандартного <marquee> и сделать на сайте плавную прокрутку новостей справа на лево, по необходимому функционалу скриптов - полным-полно, но все опираются на заданную в пикселах ширину. А у меня сайт "резиновый" и хочется чтоб однострочная новость прокручивалась от края до края <DIV>'а в которую она вставлена. "Вкусностей" надо не много, возможность задания скорости прокрутки в коде, беспрепятственное отображение новости-ссылки и остановка прокрутки при наведении мыши.
Кто-нибудь видел что-то попадающее под описание?
спустя 1 день 3 часа [обр] Thirteensmay(3/157)[досье]
<script>
// настройка скорости
delay = 50;
step = 2;

is_start = true;
fullwidth = 0;
cpos = 0;

function start_scroll()
{
  var scrolltext = document.getElementById('scrolltext');
  var scroll = document.getElementById('scroll');

  fullwidth = scrolltext.offsetWidth;
  scrolltext.style.left = 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 < 0 - fullwidth) { is_start = true; }
  }
}

function stop_scroll()
{
  clearInterval(myinterval);
}

function continue_scroll()
{
  myinterval = setInterval(do_scroll, delay);
}
</script>

<style>
#scroll {width: 100%;
         background-color: f0f0f0;
         white-space: nowrap;
         overflow: hidden;
         position: relative}
#scrolltext {position: absolute}
</style>

<body onload='start_scroll()'>

  <div style='width:25%'>

      <div id='scroll' onmouseover='stop_scroll()'
      onmouseout='continue_scroll()'>
       <div id='scrolltext'>
        Здесь скроллируемый текст,
        его скорость настраивается,
        в нем есть <a href=''>ссылка</a>,
        при наведении мыши он останавливается
       </div>
      </div>

  </div>

</body>
Типа того ?
спустя 6 дней [обр] Василий[досье]
Thirteensmay[досье]Преклоняю одно колено, если еще научите, как сделать реакцию на window.onresize, буду сражен, учитель!:)
спустя 22 часа [обр] Thirteensmay(3/157)[досье]
Да ладно вам, было бы че стоящее, а так, неполезное извращение на тему... ;)
<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>
спустя 1 день 17 часов [обр] Василий[досье]
+3, ЖАЛЬ ЧТО НЕТ +33!
Я прошерстил весь нет (hotscripts.com, woweb.ru и иже с ними и везде скрипты бегущей строки представлены, такое ощущение, как самомстоятельные страницы на выходе, не рассматривающие интеграцию:) Посему данный продукт считаю безкомпромиссным решением! Спасибо!
спустя 1 час 22 минуты [обр] Thirteensmay(3/157)[досье]
Там учтите onresize стоит на боди сразу, статически, т.е. теоретически если страница большая и бегстрока еще не догрузилась, а пользователь уже ресайзит окно, то возможна ошибка, лечить если что динамическим назначением обработчика do_resize(), например в функции start_scroll(), тут на сайте есть примеры как это делается.
спустя 6 часов [обр] Василий[досье]
Столкнулся с тем, что в принципе, если строка длиннее ширины текущего разрешения экрана, появляется горизонтальная прокрутка.
т.е. если делать достойную альтернативу тегу <MARQUE>, который ресайзится хоть до 0, здорово было бы разобраться с и этой бедой:( А в качестве последнего гвоздя в его крышку - была бы весьма приятна зацикленная прокрутка ленты не дожидаясь "уезда" последнего символа строки, т.е. ставим какой-то разделитель и строка выглядит "строки, воспользовавшись которым вы наконец-то найдете все в одном флаконе | Это самый замечательный скрипт бегущей", а то горизонтальным разрешением в 1920px уже ни кого не удивишь и получается, что основное время эта самая актуальная строка пустует..
спустя 4 дня [обр] Thirteensmay(3/157)[досье]
Ну прокрутка ленты не дожидаясь "уезда" это вы какнибудь сами сделайте, чтото мне неохота заморачиваться ;), а вот по поводу если строка длиннее ширины текущего разрешения экрана, появляется горизонтальная прокрутка могу посмотреть, только скажите при каких условиях у вас это происходит, а то чтото я как не пробую (раскопировал текст в диве 10 раз), все вроде нормально.
спустя 15 минут [обр] Филипп Ткачев(0/112)[досье]
IMHO, подобного рода скрипты только раздражают пользователя.
спустя 13 минут [обр] Thirteensmay(3/157)[досье]
Филипп Ткачев[досье] Естественно ;) Но они для того и сделаны чтобы раздражать, это же реклама. Правда можно сделать так чтобы они раздражали (умучивали) и самого рекламодателя, посмотрим что у нас получится ;)
спустя 26 минут [обр] Василий[досье]
Филипп Ткачев[досье]Да, вопрос же не в юзабилити или эстетике, есть задача, хочется решение, тем более, что на первый взгляд кажется, что решений должна быть масса, на любой вкус, тэг же был и раньше сайтостроители не брезговали стилем "новогодняя елка", естественно в массе своей по прихоти заказчика:) У Вас ни разу музыку не просили?:)
спустя 2 дня 10 часов [обр] Василий[досье]
Thirteensmay[досье]
Вот живьём: http://v2.ibdarb.ru/runningline.html
Прокрутка есть:(
Powered by POEM™ Engine Copyright © 2002-2005