Question

我有一张我希望用户看到的图片。当用户点击此图片时，我希望图片消失并让视频显示在其中。有人能告诉我怎么做吗？

这是我到目前为止的代码。

<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
    <a href="#">
         <img src="../../../upload/1/img/video.jpg" style="display:none" />
    </a>

    <div id="video" style="display:inline">
        <iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
    </div>
</div>

如果有人可以编辑我的帖子来清理代码那将是很棒的。我无法弄明白。

稍微描述一下代码：这是我点击图像后代码应该是什么样子。当您第一次看到该页面时，两个显示样式将颠倒。

任何帮助都会很棒。

由于

Answer 1

一般概念可以是这样的：

$(function() {
  $("img").click(function() {
   $(this).css("display","none");  // will hide your image
   $("body").append("<div id='video'></div>");   // will append div with id video, this div should have video code inside this.
});
});

Answer 2

您最初要隐藏视频，因此请为其指定样式display:none。您还希望为缩略图提供id，以便您可以在jQuery中引用它。您还可以从图片周围删除<a>标记（不需要）

HTML

<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
    <img id="thumbnail" src="../../../upload/1/img/video.jpg" />

    <div id="video" style="display:none">
        <iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
    </div>
</div>

的JavaScript

$(document).ready(function(){
    $("#thumbnail").click(function(){
        $(this).hide()
        $("#video").show()
    })
})

如果可以

，我也会尝试避免添加内联CSS样式

如何在隐藏时显示iframe？

2 个答案: