暫停股票新聞鼠標懸停

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