Question

这个挑战是制作一本会说话的漫画书。想想一个简单的故事，可以在四个小组中讲述。每个面板都有一个绘图（或数码照片），但没有文字。当用户点击每个面板时，录音“说”在典型的漫画中会说什么文字。您必须使用iframe来触发四个录音中的每一个，并且每个漫画面板实际上都是一个按钮，用于链接到带有面板音频的页面。如果需要，您可以使用剪贴画作为面板，并且可以通过声音效果来增强音乐效果。

我是html5中的新手，而对于其他人来说，这可能很简单，但我无法完全理解那个面板是什么。这就像一个标签？我如何使用Iframe触发它们？谢谢！

Answer 1

可能有多种方法可以做到这一点。如果您要使用iframe，则可能需要为每个面板创建单独的html文件。每个页面都应包含该页面的art（img）和音频文件。例如：

<强> panel1.html：

  <img id="panel1.jpg" src="..." />
  <audio controls>
    <source src="yourfile.mp3" type="audio/mpeg"> <!-- check out documentation to see to choose the type that is right for your file -->
  </audio>

然后

<强> panel2.html：

  <img id="panel2.jpg" src="..." />
  <audio controls>
    <source src="yourfile.mp3" type="audio/mpeg"> <!-- check out documentation to see to choose the type that is right for your file -->
  </audio>

等等...

您可能需要使用CSS设置样式。然后，在您的主页上，您需要创建iframe标记，并通过src属性将它们链接到html文件。像这样：

<iframe src="panel1.html"></iframe>

您可能还想添加一些CSS来根据自己的喜好显示这些内容。我会查看<audio>和<iframe>上的文档，了解可能对您有所帮助的更多选项。

此外，您还需要使用Javascript和/或JQuery来处理点击。例如，对于panel.html文件中的图稿<img>标记，您可以添加一个类以分配给所有图像。 JQuery将使用此art-panel类来处理所有图像的事件。

<img src="panel1.jpg" class="art-panel" alt=""/>

处理点击事件

最后，要处理单击面板，您可能需要考虑JQuery。在尝试使用之前，请务必将其链接到文档中。

$(document).ready(function() {

    $('.art-panel').click(function() {
        // Stop other audio if playing
        // Play this panel's audio
        // (or however you want to handle it of course ^_^
    });

});

这就像我现在想的那样多。玩得开心:)）

Html5的理解

1 个答案: