2025-04-12
css3实现文字上下滚动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>html5</title>
    <style>
      body {
        margin: 0px;
        font-size: 12px;
        color: #938C43;
        line-height: 150%;
        text-align: center;
      }

      a:link {
        color: #9D943A;
        font-size: 12px;
      }

      a:hover {
        color: #FF3300;
        font-size: 12px;
      }

      a:visited {
        color: #9D943A;
        font-size: 12px;
      }

      a.red:link {
        color: #ff0000;
        font-size: 12px;
      }

      a.red:hover {
        color: #ff0000;
        font-size: 12px;
      }

      a.red:visited {
        color: #ff0000;
        font-size: 12px;
      }

      #marqueeBox {
        background: #f7f7f7;
        border: 1px solid silver;
        padding: 1px;
        text-align: center;
        margin: 0 auto;
      }

      -->
    </style>
  </head>

  <body>
    <h4>滚动新闻</h4>
    <script language="JavaScript" type="text/javascript">
      var marqueeContent = new Array()
      marqueeContent[0] =
        '<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用快速取回帐号密码</a>'
      marqueeContent[1] =
        '<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>'
      marqueeContent[2] =
        '<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>'
      marqueeContent[3] =
        '<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>'
      var marqueeInterval = new Array()
      var marqueeId = 0
      var marqueeDelay = 2000
      var marqueeHeight = 20
      function initMarquee() {
        var str = marqueeContent[0]
        document.write(
          '<div id="marqueeBox" style="overflow:hidden;width:250px;height:' +
            marqueeHeight +
            'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>' +
            str +
            '</div></div>'
        )
        marqueeId++
        marqueeInterval[0] = setInterval('startMarquee()', marqueeDelay)
      }
      function startMarquee() {
        var str = marqueeContent[marqueeId]
        marqueeId++
        if (marqueeId >= marqueeContent.length) marqueeId = 0
        if (document.getElementById('marqueeBox').childNodes.length == 1) {
          var nextLine = document.createElement('DIV')
          nextLine.innerHTML = str
          document.getElementById('marqueeBox').appendChild(nextLine)
        } else {
          document.getElementById('marqueeBox').childNodes[0].innerHTML = str
          document
            .getElementById('marqueeBox')
            .appendChild(document.getElementById('marqueeBox').childNodes[0])
          document.getElementById('marqueeBox').scrollTop = 0
        }
        clearInterval(marqueeInterval[1])
        marqueeInterval[1] = setInterval('scrollMarquee()', 20)
      }
      function scrollMarquee() {
        document.getElementById('marqueeBox').scrollTop++
        if (
          document.getElementById('marqueeBox').scrollTop % marqueeHeight ==
          marqueeHeight - 1
        ) {
          clearInterval(marqueeInterval[1])
        }
      }
      initMarquee()
    </script>
  </body>
</html>

也可以用css3实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
      @keyframes move {
        0% {
          transform: translateY(0px);
        }

        50% {
          transform: translateY(-200px);
        }

        100% {
          transform: translateY(0px);
        }
      }

      .picTab {
        height: 500px;
        border: 2px solid #000;
        margin: 50px auto;
        overflow: hidden;
      }

      .picTab .topDiv {
        width: 1000px;
        height: 500px;
        animation: move 5s linear infinite;
        text-align: center;
      }

      .picTab div {
        margin: 5px;
        color: black;
      }
    </style>
  </head>

  <body>
    <div class="picTab">
      <div class="topDiv">
        <div>"控制洗衣机"</div>
        <div>"控制冰箱"</div>
        <div>"开启洗衣机"</div>
        <div>"开始洗衣"</div>
        <div>"关闭洗衣机"</div>
        <div>"棉麻洗"</div>
        <div>"洗涤时间设为20分钟"</div>
        <div>"漂洗2次"</div>
        <div>"脱水6分钟"</div>
        <div>"冰箱设为速冷模式"</div>
        <div>"冷藏室温度设为5度"</div>
        <div>"天气"</div>
      </div>
    </div>
  </body>
</html>
上次更新: 2025-12-04