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>
  • 相关阅读:
    2018.4.5课堂笔记
    黑白染色——封锁阳光大学
    末日游戏——杨辉三角+搜索
    dilworth定理+属性排序(木棍加工)
    伯努利错装信封问题
    zhx'code1
    字符串-----KMP竟然是18禁
    Presto Event Listener开发
    Presto安装完成之后需要做的
    Apache Calcite 论文学习笔记
  • 原文地址:https://www.cnblogs.com/kangshuai/p/5534497.html
Copyright © 2011-2022 走看看