Question

我正在搜索我的网站的东西可以显示，10秒后，隐藏一些HTML。

正好适用于游戏网站。我想在10秒内展示广告，在此之后，加载游戏的.SWF文件。

在10秒钟内，我想在该区域的中心显示广告的窗口，稍后将显示游戏。它就像一个700x500px的窗口。

其中一个问题是广告窗口可能是300x200px，我想把它放在中心位置。这就像我想制作一个10秒的场景，广告显示游戏正在加载。

我求求你在一个初学者级别回答，我不是脚本专家，只知道一些HTML，这就是为什么我对网上发现的信息有点不知所措。我很感激你告诉我如何以字面的方式在html中编写脚本或jquery。

很抱歉这么新手，但我想学习你可以告诉我的例子。提前谢谢。

Answer 1

这种方法可能对你起作用（需要jQuery）..你可以在这里看到一个有效的例子（没有flash）：http://jsfiddle.net/qyCX9/

我已经在IE8，FF 3.8和Google Chrome中进行了测试。

这是HTML标记：

<div id="advertisement" class="hidden">your advertisement here</div>
<div id="game">play game!</div>

这是将游戏和广告定位在彼此之上的CSS：

<style type="text/css">

#advertisement {
    width: 300px; height: 200px;
    background: red;
 }

#game {
    width: 700px; height: 500px;
    background: green;
}

.hidden {
    display: none;   
}

</style>

这是定位和展示广告所需的javascript，然后在设定的秒数后将其删除..

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">

// get game and ad container
var $game = $('#game'), $advertisement = $('#advertisement');

// position ad container in center of game
$advertisement.css({
    'position' : 'absolute',
    'top'      : ($game.height() - $advertisement.height()) / 2 + $game.scrollTop() + 'px',
    'left'     : ($game.width() - $advertisement.width()) / 2 + $game.scrollLeft() + 'px'
}).removeClass('hidden'); // show ad

// hide advertisement after x seconds..
var seconds = 3;
setTimeout(function () {
    $advertisement.addClass('hidden');
}, 1000 * seconds);

</script>

请告诉我此解决方案是否适合您！

干杯！

在插入Flash之前显示和隐藏HTML

1 个答案: