通过点击隐藏DIV，并通过JavaScript显示另一个DIV

Hide a DIV via click and make another one visible instead via JavaScript?

本文关键字：DIV JavaScript 显示 另一个 隐藏      更新时间：2024-02-25

好吧，很难说（对不起我英语不好）。。。我想创建一个自定义预览图像到我的嵌入式媒体（你管和东西）。。。

以下是我认为它可以工作的方式：

  1. 我有一个DIV，里面有一个视频的预览图像和一个自定义播放按钮
  2. 单击该图像/按钮后，DIV将隐藏并
  3. 。。。出现另一个DIV，而不是原来的iframe嵌入代码
  4. 视频自动启动

这里有一个小例子（但我不知道这到底是怎么做到的……通过fancybox？）：http://www.crackajack.de/2012/07/25/the-mayor-of-london-introduces-the-olympic-games/

你知道我怎么能"轻松"做到这一点吗？

非常感谢！

如果这只是出于显示原因而非性能原因，那么加载这两个div可能是最容易的，加载div的位置绝对位于视频上方，视频隐藏。然后，一旦你点击，你就可以使用youtubeapi来自动播放。

隐藏和显示部分在这里http://jsfiddle.net/TUMcm/youtube的api就在这里https://developers.google.com/youtube/js_api_reference

更多信息

所以如果你的玩家是这个

<embed id="playerid" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" quality="high" bgcolor="#000000" name="playerid" style="" src="http://www.youtube.com/apiplayerbeta?enablejsapi=1&playerapiid=normalplayer" type="application/x-shockwave-flash">

在点击功能中，你会放一些类似的东西

var myPlayer = document.getElementById('playerid');
myPlayer.playVideo();

这样的东西应该会让你开始：

http://jsfiddle.net/lbstr/YdwEF/

由于您没有显示任何标记，以下是我对如何做到这一点的想法：

<div class="container">
    <div class="preview">
        <!-- Some preview image here -->
    </div>
    <div class="media">
        <!-- Some embed code here -->
    </div>
</div>​

有了这个CSS：

.container { position: relative; }
.container .preview, 
.container .media { width: 500px; height: 350px; position: absolute; top: 0; left: 0; }
.container .preview { background-color: blue; z-index: 2; }
.container .media { background-color: red; z-index: 1; }

这个JS（jQuery）：

$('.container .preview').click(function(){
    $(this).siblings('.media').css("z-index", 3);
});​
相关文章：