8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

公告上下滚动

admin 10月前 146

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://bbs.dudouwang.com/view/js/jquery-3.1.0.js?1.0"></script>
    <style>
        * {
  padding: 0;
  margin: 0;
}

ui,
li {
  list-style: none;
}

#news {
  height: 18px;
  overflow: hidden;
}
    </style>
</head>
<body>
<div class="info_right up_notice f14" id="news">
  <ul>
    <li>11111这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告</li>
    <li>2222这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告</li>
    <li>3333这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告</li>
    <li>4444这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告这是公告</li>
  </ul>
</div>
<script>
   $(function() {
  var $this = $("#news");
  var scrollTimer;
  $this.hover(function() {
    clearInterval(scrollTimer);
  }, function() {
    scrollTimer = setInterval(function() {
      scrollNews($this);
    }, 2000);
  }).trigger("mouseleave");

  function scrollNews(obj) {
    var $self = obj.find("ul");
    var lineHeight = $self.find("li:first").height();
    $self.animate({
      "marginTop": -lineHeight + "px"
    }, 600, function() {
      $self.css({
        marginTop: 0
      }).find("li:first").appendTo($self);
    })
  }
})
</script>
</body>
</html>
最新回复 (0)
    • 肚兜网
      2
        登录 注册 QQ登录暂未开通
返回
发新帖