Question

我想要获得一个背景动画图像，它从右向左移动，但图像不会动画，你能帮我验证一下我的代码吗？

<body>
   <div id="background-container"></div>

    <script> type="text/javascipt">
        function animateBackground(elem, speed) {
          var x = 0 ;
          var y = -50;

        elem.style.backgroundPosition = x + 'px' + ' ' + y + 'px';

        var timer = setInterval (function(speed) {
        elem.style.backgroundPosition = x + 'px' + ' ' + y + 'px';
        x--;
        if (x == -600) {
              clearInterval(timer);
              }
        },speed)
  }

   document.addEventListener("DOMContentLoaded", animateBackground(document.getElementById('background-container'), 15), false); 
</script>
</body>

Answer 1

你的代码非常难看，但实际上看起来很好。什么是错误的是你如何添加事件处理程序。您不是添加处理函数，而是调用内联的处理函数，因此它实际上不会添加任何侦听器。你应该使用内联的匿名函数传递function本身，例如像这样。

document.addEventListener("DOMContentLoaded", function() { animateBackground(document.getElementById('background-container'), 15); }, false);

Answer 2

你本可以提供一个jsfiddle链接，这会让它变得简单。顺便说一句，这里是工作的jsfiddle，https://jsfiddle.net/pmankar/4o88z0tt/

我使用

在div标签中添加了css背景

<div class="control-group @Html.TextForInvalidField(m => m.Password, "error")">
  @Html.LabelFor(m => m.Password, new { @class = "control-label" })
  <div class="controls">
    @Html.PasswordFor(m => m.Password)
    @Html.ValidationMessageFor(m => m.Password, null, new { @class = "inline-help error" })
  </div>
</div>

请放心，我没有对您的js代码或HTML代码进行任何更改。它对我来说很好。

动画背景图像javascript无法正常工作

2 个答案: