暂停股票新闻鼠标悬停

Question

我工作的这个的jsfiddle发现了一个新闻股票，但它不工作，因为我想.the问题是：

1. 为我增加所有的div的宽度和高度。它不能正常工作最后的divs在第二轮新闻的第一个div上重叠。

2. 主要divs内的新闻div不是循环首先消息应该是最后一个。

3. 它不会暂停onmouseover。

下面是这个 here

<script> 
    window.verticalScroller = function ($elem) { 
    var top = parseInt($elem.css('top')); 
    var temp = - 1 * $('#verticalScroller > div').height(); 
    if (top < temp) { 
    top = $('#verticalScroller').height() 
    $elem.css('top', top); 
    } 
    $elem.animate({ 
    top: (parseInt(top) - 60) 
    }, 600, function() { 
    window.verticalScroller($(this)) 
    }); 
} 
$(document).ready(function() { 
    var i = 0; 
    $('#verticalScroller > div').each(function() { 
    $(this).css('top', i); 
    i += 60; 
    window.verticalScroller($(this)); 
    }); 
}); 

</script> 

我申请这个东阳它不需要任何jQuery的。如果我使用的是股票与jQuery和插件以前的jQuery没有按小提琴即使在没有使用冲突的方法之后也不起作用。请帮助我解决这个问题。

UPDATE：

<div id="verticalScroller"> 
<div style="position: relative;height:200px;width:352px;">1 Lorem ipsum dolor sit</div> 
<div style="position: relative;height:200px;width:352px;">2 Lorem ipsum dolor sit</div> 
<div style="position: relative;height:200px;width:352px;">3 Lorem ipsum dolor sit</div> 
<div style="position: relative;height:200px;width:352px;">4 Lorem ipsum dolor sit</div> 
</div> 

CSS更新：

#verticalScroller { 
position: absolute; 
width:352px; 
height: 380px; 
border: 1px solid red; 
overflow: hidden; 
} 
#verticalScroller > div { 
position:absolute; 
width:50px; 
height:50px; 
border: 1px solid blue; 
overflow:hidden; 
} 

Answer 1

您可以按以下方式使用条件创建停止：

window.verticalScroller = function ($elem) { 
    if (window.stop == false) { 
     var top = parseInt($elem.css("top")); 
     var temp = -1 * $('#verticalScroller > div').height(); 
     if (top < temp) { 
      top = $('#verticalScroller').height() 
      $elem.css("top", top); 
     } 
     $elem.animate({ 
      top: (parseInt(top) - 60) 
     }, 600, function() { 
      window.verticalScroller($(this)) 
     }); 
    } else { 
     setTimeout(function() { 
      window.verticalScroller($elem); 
     }, 600); 
    } 
} 


$(document).ready(function() { 
    window.stop = false; 
    var i = 0; 
    $("#verticalScroller > div").each(function() { 
     $(this).css("top", i); 
     i += 60; 
     window.verticalScroller($(this)); 
    }); 
    $("#verticalScroller").on('mouseenter', function() { 
     window.stop = true; 
    }); 
    $("#verticalScroller").on('mouseleave', function() { 
     window.stop = false; 
    }); 
}); 

Working Fiddle