jquery 新闻滚动效果

$(function () {
     var scrollTimer = null;
     var delay = 2000;
     //1.鼠标对新闻触发mouseout事件后每2s调用scrollNews()
     //2.鼠标对新闻触发mouseover事件后停止调用scrollNews()
     //3.初次加载页面触发鼠标对新闻的mouseout事件
     $('div.busMsg').hover(function () {
     clearInterval(scrollTimer);
     }, function () {
     scrollTimer = setInterval(function () {
     scrollNews();
     }, delay);
     }).triggerHandler('mouseout');
     });
     //滚动新闻
     function scrollNews() {
     var $news = $('div.busMsg>ul');
     var $lineHeight = $news.find('li:first').height();
     $news.animate({ 'marginTop': -$lineHeight + 'px' }, 600, function () {
     $news.css({ margin: 0 }).find('li:first').appendTo($news);
     });
     }

 

<div id="busMsg" class="busMsg">
            <ul class="busMsgs">
              <li>
                
              </li>

            </ul>
   </div>

转载于:https://www.cnblogs.com/ckaifeng/p/5049154.html