master

分支 (2)

管理

管理

master

dev

singlepage
/
多条新闻滚动Jquery-marginTop.html

<html>

<HEAD>
  <TITLE>文字链接列表滚动</TITLE>
  <META content="text/html; charset=utf-8" http-equiv=Content-Type>
  <script src="./jquery1.11.1.min.js"></script>
  <STYLE type=text/css>
    * {
      margin: 0;
      padding: 0;
    }

    .scroll-box {
      width: 400px;
      height: 200px;
      border: 2px solid #000;
      margin: 20px auto;
      overflow: hidden;
    }

    .scroll-box ul {
      list-style: none;
      width: 100%;
      height: 100%;
    }

    .scroll-box ul li {
      width: 100%;
      height: 40px;
      box-sizing: border-box;
      line-height: 40px;
      text-align: center;
    }
  </STYLE>
</HEAD>

<body>
  <div class="scroll-box">
    <ul>
      <li>1好消息！好消息！本店所有商品全部白送1</li>
      <li>2好消息！好消息！本店所有商品全部白送2</li>
      <li>3好消息！好消息！本店所有商品全部白送3</li>
      <li>4好消息！好消息！本店所有商品全部白送4</li>
      <li>5好消息！好消息！本店所有商品全部白送5</li>
      <li>6好消息！好消息！本店所有商品全部白送6</li>
      <li>7好消息！好消息！本店所有商品全部白送7</li>
      <li>8好消息！好消息！本店所有商品全部白送8</li>
    </ul>
    <script>
      $(function () {
        //获得当前<ul>
        var $uList = $(".scroll-box ul");
        var timer = null;
        //触摸清空定时器
        $uList.hover(function () {
          clearInterval(timer);
        },
          function () { //离开启动定时器
            timer = setInterval(function () {
              scrollList($uList);
            },
              1000);
          }).trigger("mouseleave"); //自动触发触摸事件
        //滚动动画
        function scrollList(obj) {
          //获得当前<li>的高度
          var scrollHeight = $("ul li:first").height();
          //滚动出一个<li>的高度
          $uList.stop().animate({
            marginTop: -scrollHeight
          },
            600,
            function () {
              //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
              $uList.css({
                marginTop: 0
              }).find("li:first").appendTo($uList);
            });
        }
      });
    </script>
  </div>
</body>

</html>