Question

我正在使用以下代码段来创建滚动文本框：

＆＃13;

<html>

<head>
  <style type="text/css">
    #scroll {
      position: absolute;
      white-space: nowrap;
      top: 0px;
      left: 200px;
    }
    #oScroll {
      margin: 0px;
      padding: 0px;
      position: relative;
      width: 200px;
      height: 20px;
      overflow: hidden;
    }
  </style>
  <script type="text/javascript">
    function scroll(oid, iid) {
      this.oCont = document.getElementById(oid)
      this.ele = document.getElementById(iid)
      this.width = this.ele.clientWidth;
      this.n = this.oCont.clientWidth;
      this.move = function() {
        this.ele.style.left = this.n + "px"
        this.n--
          if (this.n < (-this.width)) {
            this.n = this.oCont.clientWidth
          }
      }
    }
    var vScroll

    function setup() {
      vScroll = new scroll("oScroll", "scroll");
      setInterval("vScroll.move()", 20)
    }
    onload = function() {
      setup()
    }
  </script>
</head>

<body>
  <div id="oScroll">
    <div id="scroll">This is the scrolling text</div>
  </div>
</body>

</html>

＆＃13;

但是，我希望创建一个滚动的＆＃39;图片，每当我尝试在＆＃39;中创建<img>标记时，这就是滚动文字＆＃39; div，它不会出现在页面上（根本没有）。

我对javascript很新（好吧，一个完整的新手），如果有人可以通知我添加此图片的方法，我会很感激：

Lorry

除了在photoshop / etc中创建我自己的gif图像外，我一直无法找到创建这样的东西的方法。

修改然而，我尝试使用marqee：

Using a Marquee

Answer 1

如果要在div中添加128px高的图像，还需要将包含元素的高度从20px更改为128px。

您的代码在这里工作：

＆＃13;

<html>

<head>
  <style type="text/css">
    #scroll {
      position: absolute;
      white-space: nowrap;
      top: 0px;
      left: 200px;
    }
    #oScroll {
      margin: 0px;
      padding: 0px;
      position: relative;
      width: 200px;
      height: 128px;
      overflow: hidden;
    }
  </style>
  <script type="text/javascript">
    function scroll(oid, iid) {
      this.oCont = document.getElementById(oid)
      this.ele = document.getElementById(iid)
      this.width = this.ele.clientWidth;
      this.n = this.oCont.clientWidth;
      this.move = function() {
        this.ele.style.left = this.n + "px"
        this.n--
          if (this.n < (-this.width)) {
            this.n = this.oCont.clientWidth
          }
      }
    }
    var vScroll

    function setup() {
      vScroll = new scroll("oScroll", "scroll");
      setInterval("vScroll.move()", 20)
    }
    onload = function() {
      setup()
    }
  </script>
</head>

<body>
  <div id="oScroll">
    <img id="scroll" src='http://i.stack.imgur.com/P8i8o.png' />
  </div>
</body>

</html>

＆＃13;

Answer 2

如果您想使用现有代码，只需更改CSS中#oScroll的高度

即可

<html>

<head>
  <style type="text/css">
    #scroll {
      position: absolute;
      white-space: nowrap;
      top: 0px;
      left: 200px;
    }
    #oScroll {
      margin: 0px;
      padding: 0px;
      position: relative;
      width: 200px;
      height: 200px;
      overflow: hidden;
    }
  </style>
  <script type="text/javascript">
    function scroll(oid, iid) {
      this.oCont = document.getElementById(oid)
      this.ele = document.getElementById(iid)
      this.width = this.ele.clientWidth;
      this.n = this.oCont.clientWidth;
      this.move = function() {
        this.ele.style.left = this.n + "px"
        this.n--
          if (this.n < (-this.width)) {
            this.n = this.oCont.clientWidth
          }
      }
    }
    var vScroll

    function setup() {
      vScroll = new scroll("oScroll", "scroll");
      setInterval("vScroll.move()", 20)
    }
    onload = function() {
      setup()
    }
  </script>
</head>

<body>
  <div id="oScroll">
    <div id="scroll"><img src="http://i.stack.imgur.com/P8i8o.png" /></div>
  </div>
</body>

</html>

如何生成动画滚动图像效果

2 个答案: