如何让一个框在页面加载时从浏览器窗口的顶部出现

How to get a box to appear from the top of the browser window on page load?

本文关键字：浏览器 加载 窗口 顶部 一个      更新时间：2023-09-26

我希望在页面加载时从浏览器窗口顶部出现一个框。

理想情况下，它看起来像这样：

http://demo.cookieconsent.silktide.com/

所以页面加载并向下滑动。

我将如何实现这一目标？

我看过 http://jqueryui.com/demos/dialog/但它似乎没有做上述事情。

试试这个

在此示例中，我创建了一个固定在窗口顶部但起初隐藏的div，然后在页面加载时以向下滑动动画显示。

希望这有帮助

在此处更新演示

试试这个-

.html 

<div id="box"><h1 style="text-align:center">content goes here</h1></div>

jQuery

$(document).ready(function(){
    $("#box").animate({top:"0px"},"slow");
});

.css

background:red;
position:fixed;
width:100%;
height:60px;
top:-60px

总的来说，代码是-

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
#box
{
background:red;
position:fixed;
width:100%;
height:60px;
top:-60px
}
</style>
<script type="text/javascript"> 
$(document).ready(function(){
    $("#box").animate({top:"0px"},"slow");
});
</script> 
</head>
<body>
<div id="box"><h1 style="text-align:center">content goes here</h1></div>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
</body>
</html>

在你的 html 中放一个<div>，将其 css 设置为 position: fixed 你就完成了。

相关文章：