网站中通知公告栏目滚动提示的效果

<script type="text/javascript" src="jquery.js"></script>
<DIV style="OVERFLOW: hidden;height: 200px;background-color:yellow;" class=sidlis>
      <UL id=ticker>
             <li>测试一下滚动条</li>
             <li>测试一下滚动条</li>
             <li>测试一下滚动条</li>
             <li>测试一下滚动条</li>
             <li>测试一下滚动条</li>
             <li>测试一下滚动条</li>
             <li>测试一下滚动条</li>
             <li>测试一下滚动条</li>
             <li>测试一下滚动条</li>
             <li>测试一下滚动条</li>
      </UL>
<!--   公告栏目的滚动效果 -->
  <SCRIPT type=text/javascript>
    $(function() {
    var ticker = $("#ticker");
    ticker.children().filter("li").each(function() {
      var dt = $(this),
        container = $("<div>");
      dt.next().appendTo(container);
      dt.prependTo(container);
      container.appendTo(ticker);
    });
    ticker.css("overflow", "hidden");
    function animator(currentItem) {
      var distance = currentItem.height();
      duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.015;
      currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
      currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
      animator(currentItem.parent().children(":first"));
      }); 
    };    
    animator(ticker.children(":first"));
    ticker.mouseenter(function() {
      ticker.children().stop();     
    });
    ticker.mouseleave(function() {  
      animator(ticker.children(":first"));      
    });
    });
    </SCRIPT>
</DIV>

 

posted @ 2016-05-27 14:20  骏码信息  阅读(2218)  评论(0编辑  收藏  举报