Question

好的，所以我在div中有一个我需要的嵌入式播放器，但div（包括嵌入链接）需要出现并消失，使用css或Javascript

Heres the Embed Code

<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=deadpoolyplays" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=deadpoolyplays&auto_play=true&start_volume=25" /></object><a href="http://www.twitch.tv/deadpoolyplays" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline; text-align:center;">Watch live video from DeadpoolyPlays on www.twitch.tv</a>

然后我需要同样的事情。

<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=deadpoolyplays&popout_chat=true" height="500" width="350"></iframe>

Answer 1

有多种方法可以做到这一点。使用Javascript和CSS，您可以更改两个不同元素的display属性以显示和隐藏它们。

例如：

function showStuff()
{
    document.getElementById("live_embed").style.display = "block";
    document.getElementById("chat_embed").style.display = "block";
}

function hideStuff()
{
    document.getElementById("live_embed").style.display = "none";
    document.getElementById("chat_embed").style.display = "none";
}

如果你愿意导入jQuery，你可以简单地调用.fadeIn()和.fadeOut()方法来完成同样的事情，并且有一个很好的渐变过渡。

Answer 2

在JQuery中，您可以使用show / hide函数：

$(selector).hide(speed, callback);

$(selector).show(speed, callback);

例如：

$("button").click(function () {
  $("object/iframe").hide(1000);
});

您可以找到更多示例in jQuery's documentation。

单击链接时需要显示Div

2 个答案: