Question

我正在尝试使用这个anime.js文件作为网站横幅的背景。在这里

<section id="banner">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-diamond"></span>
    </div>
    <!-- Animation Script -->
    <!--
      <script>
        document.getElementById("banner").innerHTML = '<object type="text/html" data="animation/index.html"></object>';
      </script>
    -->
    <h2>TEXT</h2>
    <p>MORE TEXT</p>
  </div>
</section>

我正在像这样加载脚本，但问题是它完全替换并加载了inner div。我应该如何将其加载到整个部分？我还希望内部div完好无损。

Answer 1

问题是因为您将完全覆盖#banner元素的HTML，并完全清除其现有内容。

要解决此问题，请单独创建object元素，然后使用appendChild()将其添加到#banner元素中：

var obj = document.createElement('object');
obj.type = 'text/html';
obj.data = 'animation/index.html';
document.getElementById('banner').appendChild(obj);

<section id="banner">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-diamond"></span>
    </div>
    <h2>TEXT</h2>
    <p>MORE TEXT</p>
  </div>
</section>

加载anime.js动画html文件作为HTML部分的背景

1 个答案: