html - 我希望在直接访问网站时显示 logo-overlay div
问题描述
我希望在直接访问网站时显示徽标叠加 div,它将全屏显示我的徽标。然后几秒钟后显示网站并让覆盖消失。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style>
#overlay {
display: none;
background: dodgerblue;
width: 100%;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script>
$('#overlay').fadeIn('fast').delay(1000).fadeOut('fast');
</script>
</head>
<body>
<div id="logo-overlay">Logo here</div>
</body>
</html>
解决方案
//$( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
$(document).ready(function() {
$('#overlay').fadeIn('fast').delay(1000).fadeOut('fast');
});
#overlay {
position: absolute; // will pull the element out of the document flow
display: none;
background: dodgerblue;
width: 100%;
height: 100vh; // will stretch it to the full height of the screen
}
html,
body {
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">Logo here</div>
My site
推荐阅读
- sql - 在 SQL 查询中获取重复的结果
- python - 我正在尝试检查 Linux Mint 上的目录中是否存在文件但收到错误
- java - 从代码控制 Android 应用程序的卸载程序操作
- c++ - 试图重载和运算符“+”但无法正确定义类构造函数
- c# - Visual Studio Code C# 如何更改控制台
- python - 使用python selenium与页面重叠时如何提取页脚的href链接?
- sql - 查询以显示何时在销售订单中使用折扣行项目,但仍显示所有销售订单
- powerbi - 如何在power bi中找到组内的最小值和最大值
- ios - UITraitsCollection 是在 IB/Storyboard 中区分 iPad Landscape 与 Portrait AutoLayout 的路径吗
- dbt - DBT 在 set_sql_header 中摄取相同的模型名称