zoukankan      html  css  js  c++  java
  • 文字,广告,消息向上滚动

    原理:

      1: 用到定时器setInterval(),动画animate()方法,改变margin-top: 的值;

      2: 用定位时,改变top: 的值; (效果比较差,不顺畅);

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
    <div id="broadcast" class="bar" name="giftactive">
     <div style="float:left"><strong>间隔滚动效果:</strong></div>
     <div id="demo" style="overflow:hidden;height:22px;line-height:22px;">
         <ul class="mingdan" id="holder">
              <li><a href="#" target="_blank">aaaaaa</a></li>
              <li><a href="#" target="_blank">bbbbbb</a></li>
              <li><a href="#" target="_blank">cccccc</a></li>
              <li><a href="#" target="_blank">dddddd</a></li>
              <li><a href="#" target="_blank">eeeeee</a></li>
         </ul>
     </div>
    </div>
    <script type="text/javascript">
        function AutoScroll(obj) {
             $(obj).find("ul:first").animate({
                 marginTop: "-22px"
            }, 500, function() {
                 $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
            });
        }
        $(document).ready(function() {
            setInterval('AutoScroll("#demo")', 1000)
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    【bzoj 1143】[CTSC2008]祭祀river
    【SRM-09 B】撕书II
    【刷题记录】BZOJ-USACO
    【noip 2014】提高组Day2T3.华容道
    【noip 2012】提高组Day2T3.疫情控制
    【noip 2012】提高组Day1T3.开车旅行
    点分治
    2—SAT问题
    生成树
    莫比乌斯反演
  • 原文地址:https://www.cnblogs.com/wangyihong/p/6971385.html
Copyright © 2011-2022 走看看