公告上下滚动基于Jquery

前提  需要引入jquery  如果你用的单位不是px  修改的同时红色部分需保持一致

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>上下滚动公告栏</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
      *{
        margin: 0px;
        padding: 0px;
      }
      ul {
        list-style: none;
        margin: 0;
      }
      li {
        padding: 5px;
      }
      .notice {
        position: relative;
        height: 26px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="notice">
      <ul class="ul-list">
        <li>就算没有人喜欢你 也并不表你不好</li>
        <li>你要等</li>
        <li>在未来的某一天</li>
        <li>有一个人会对你说喜欢你</li>
        <li>在此前你要先学会好好爱自己</li>
        <li>陆筱璟</li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    $(function() {
      var num = $(".ul-list").find("li").length;
      if (num > 1) {
        setInterval(function() {
          $(".ul-list").animate(
            {
              marginTop: "-26px"
            },
            500,
            function() {
              $(this)
                .css({ marginTop: "0" })
                .find("li:first")
                .appendTo(this);
            }
          );
        }, 3000);
      }
    });
  </script>
</html>

 

posted @ 2019-11-22 14:43  bingxiaoxiao  阅读(408)  评论(0)    收藏  举报