单条滚动js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单条滚动示例</title>
<style>
  #scrollDiv {
    width: 300px;
    height: 50px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
  }
  #scrollContent {
    position: absolute;
    white-space: nowrap;
  }
</style>
</head>
<body>

<div id="scrollDiv">
  <div id="scrollContent">这是一条滚动的新闻信息示例。这是一条滚动的新闻信息示例。</div>
</div>

<script>
function scrollNews() {
  var content = document.getElementById('scrollContent');
  var contentHeight = content.offsetHeight;
  var divHeight = document.getElementById('scrollDiv').offsetHeight;
  content.style.top = -contentHeight + 'px';
  content.animate([
    { top: divHeight + 'px' },
    { top: -contentHeight + 'px' }
  ], {
    duration: 5000,
    iterations: Infinity
  });
}

window.onload = function() {
  scrollNews();
};
</script>

</body>
</html>