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


<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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM