Форум

Nina_2012 · #1 (**permalink**) 03.07.2012, 11:50

День добрый! Такая задача:
Бегущая строка снизу вверх, очередная прокручиваемая строка приостанавливается на неск. секунд, при наведении блок останавливается пока не уберут курсор. Прокрутка циклична.
Проблема: если навести на одну строку, потом сразу на другую, код не успевает это обработать и всё сбивается - блок со строками, не реагируя на курсор, уезжает вверх.
Исходный код:

<div id="anim" style="position: relative; height: 25px; background-color: aqua; line-height: 25px;" onmouseover="window.isStart = false" onmouseout="window.isStart = true; animateNews(number);">
    <div id="anim2" style="position: absolute; margin-top: 25px;">
        <a href="#">1111111</a><br />
        <a href="#">2222222</a><br />
        <a href="#">3333333</a>
    </div>
</div>

isStart = true;
    number = 0;
    
    function animateNews(i){
        number = i;  // какая строка по счету крутится
        if(isStart == true){
            len = jQuery('#anim').height();   // вычисляет, на какой интервал поднимать строку, чтобы в нужный момент сделать ее остановку на пару сек
            a1 = jQuery('#anim2').height();
            bottom = parseInt("-" + a1);
            size = a1 / len;
            a2 = parseInt(jQuery('#anim2').css('bottom'));
            jQuery('#exam').html(bottom);
            if((i <= size) && (a2 < len)){
                jQuery("#anim2").animate({"bottom": "+="+len+"px"}, 1000);
                
                if(i<size)
                    setTimeout("animateNews("+(i+1)+")", 2000);
                else
                    setTimeout("animateNews("+(i+1)+")", 1010);
            }else{   // условие для последней строки, чтобы перевести блок на исходное положение и начать сначала
                jQuery("#anim2").css({'bottom': bottom});
                i=0;
                setTimeout("animateNews("+(i)+")", 0);
            }
        }else{
            return;
            //setTimeout("animateNews("+(i)+")", 500);
        }
    }
    animateNews(0);

Может можно остановить блок другими путями (приостановить функцию), либо еще что дописать? Направьте, плиз

Deff · #2 (**permalink**) 03.07.2012, 12:53

Nina_2012,
Где-то был похожий пример от melky в июне

Nina_2012 · #3 (**permalink**) 03.07.2012, 13:02

К сожалению, там нет ничего по остановке текста наведением курсора

Deff · #4 (**permalink**) 03.07.2012, 16:04

<html>

<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title></title>
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
  .marga {
    background-color: #BADA55;
    position: relative;
    width: 300px;
    height: 400px;
    overflow: hidden;
  }
  .marga div {
    position: relative;
    border: 1px red dashed;
  }
</style>
</head>
<body>
  <div class="marga">
    <div>предложение1</div>
    <div>предложение2</div>
    <div>предложение3</div>
  </div>

<script>
$(function Myanim(){
  var 
      fadeIn_time = 400,
      bubble_time = 2000,
      bubble_easing = "swing",
      stay_time = 2000,
      fadeOut_time = 800,
      
      marga = $(".marga"),
      divs = marga.find("div").hide(),
      bottomeness = marga.height(),
      widthness = marga.width(),
      i = 0,
      curr;
  
  (function loop(next){
    
    divs.eq(i - 1).hide();
    
    if (!divs[i]) {
      i = 0;
    }
    curr = divs.eq(i);
    
    curr.
      fadeIn(fadeIn_time).
        css({"top": bottomeness - curr.outerHeight(), left: 0}).
          animate({ top: 0 }, bubble_time, bubble_easing).
            delay(stay_time).
              animate({left:-widthness}, fadeOut_time).
                queue(loop); 
    
    i += 1;
    
    if (next) {
      next();
    }
  })();
   $(".marga > div").mouseover(function(){
     $(this).stop(true);
    }).mouseout(function(){
     //Tут чот запустить  с данной позиции
    });
});
</script>
<script type="text/javascript">

</script>
</body>
</html>

Как запустить спрашивайте у melky

Nina_2012 · #5 (**permalink**) 04.07.2012, 10:52

Спасибо за ответы! Появилась другая идея, пока их смотрела

Вроде работает идеально)) Может кому пригодится:

<div id="anim" style="height: 25px; line-height: 25px;" onmouseover="window.run = false" onmouseout="window.run = true;">
    <div id="anim2" style="position: absolute;">
        <a href="#">1111111</a><br />
        <a href="#">2222222</a><br />
        <a href="#">3333333</a>
    </div>
</div>

<script>
    run = true;
    lenSmall = jQuery('#anim').height();
    lenBig = jQuery('#anim2').height();
    jQuery("#anim2").css({'bottom':'-'+(lenBig-2)+'px'});

    function animateNews(){
        if(run){
            lenNow = parseInt(jQuery('#anim2').css('bottom'));
            if(lenNow > lenSmall){
                jQuery("#anim2").css({'bottom':'-'+(lenBig-2)+'px'});
            }else{  // возвращаем блок вниз и цикл заново
                jQuery("#anim2").animate({"bottom": "+=1px"}, 10);
            }
            
            // если прошли на высоту строки и это была не последняя строка, то делаем паузу
            if((lenNow % lenSmall) == 0 && lenNow < lenSmall){
                setTimeout("animateNews()", 1000);
            }else{
                setTimeout("animateNews()", 70);
            }
        }else{
            setTimeout("animateNews()", 70);
        }
    }
    
    animateNews();
</script>

yurik417 · #6 (**permalink**) 26.01.2013, 04:49

Воспользуйтесь плагином на jquery
http://masscode.ru/index.php/k2/item/44-limarquee
В нем есть все что вам нужно и даже больше

Форум

Справочник

Discord чат

Курсы javascript