zoukankan      html  css  js  c++  java
  • 网站中通知公告栏目滚动提示的效果

    <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>
  • 相关阅读:
    fastJson Gson对比及java序列化问题
    HashMap遍历时的性能对比
    FileChannel与ByteBuffer的使用示例
    spring boot中ConditionalOnClass为什么没有classNotFound类加载异常
    maven插件: shade, assembly
    spring容器中的beanName
    线程状态
    IDEA插件
    IDEA 工具使用指南
    方法调用:对象的传值与传引用
  • 原文地址:https://www.cnblogs.com/kangshuai/p/5534497.html
Copyright © 2011-2022 走看看