0

我有一个希望用户看到的图像。当用户单击此图像时，我希望图像消失并在其位置显示视频。有人可以告诉我如何做到这一点吗？

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

<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>

如果有人可以编辑我的帖子以清理代码，那就太好了。我想不通。

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

任何帮助都会很棒。

谢谢

4

2 回答 2

0

您最初想隐藏视频，所以给它 style 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 样式

于 2013-07-18T15:31:21.193 回答
0

一般的想法可以是这样的：

$(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.
});
});
于 2013-07-18T15:08:53.920 回答