javascript - 使绝对定位的 div 覆盖视口
问题描述
我正在制作一个 jQuery 动画,该动画具有在视口(left: 150px
)的特定位置生成的绝对定位 div,并且该 div 垂直和水平增长,覆盖整个视口
但不幸的是,div 溢出了视口,并没有覆盖整个屏幕
$(document).ready(function() {
function generateChild(top, bottom, left, right) {
$("#divGenerator").append(`
<div style="top:${top};bottom:${bottom};left:${left};right:${right};" class="child"></div>
`);
}
generateChild("50vh", "0", "80vw", "0");
/*
setInterval(function() {
$(".child").animate({
"transform": "translate3d(0, 0, 0)",
"transition": "all 0.5s ease-out"
}, 3000, function() {
$(this).fadeOut().remove();
});
}, 1000);
*/
})
body {
margin: 0;
overflow: hidden;
}
#divGenerator {
position: relative;
height: 100vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: black;
border: 1px solid black;
}
.child {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trippy Waves</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="divGenerator"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
解决方案
为了达到这个效果,你需要几个条件:
- 使用
position:fixed
(notabsolute
),因此您的元素相对于视口定位,而不是相对于其最近的相对定位的父元素。 - 从您开始的元素中获取初始
top
的left
,width
和。请注意,此方法是在 DOM 元素上定义的,而不是在 jQuery 包装器上(所以你需要)height
.getBoundingClientRect()
$(selector).get(0).getBoundingClientRect()
- 从这些位置动画到:
top:0;left:0;width:100vw;height:100vh
。
在这个特定示例中,您不需要getBoundingClientRect()
,因为您从任意数据(从您的函数)生成元素 - 但通常您需要它,因为它获取元素相对于当前视口位置的位置(包括滚动等... )。
$(document).ready(function() {
function generateChild(top, bottom, left, right) {
$("#divGenerator").append(`
<div style="top:${top};bottom:${bottom};left:${left};right:${right};" class="child"></div>
`);
}
generateChild("50vh", "0", "80vw", "0");
setInterval(function() {
$(".child").animate({
"width": "100vw",
"height": "100vh",
"top":0,
"left":0
}, 3000, function() {
$(this).fadeOut().remove();
});
}, 1000);
})
body {
margin: 0;
overflow: hidden;
}
#divGenerator {
position: relative;
height: 100vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: black;
border: 1px solid black;
}
.child {
position: fixed;
width: 20px;
height: 20px;
border: 1px solid white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trippy Waves</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="divGenerator"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
个人建议:不要使用.animate()
. 使用速度。
推荐阅读
- rust - `::parse()` 在结构上做了什么?
- python - 将函数 tf.contrib.training.bucket_by_sequence_length() 从 1.x 重写为 tensorflow 2.x
- haskell - 为什么 Haskell 9.0 的线性类型没有零,而 Idris 2 有?
- ruby-on-rails - 使用 simple_form 和 tailwind_wrapper 填充时间字段
- python - ValueError:logits 和标签必须具有相同的形状 ((None, 10) vs (None, 1))
- sql-server - 如何在 SQL Server 中旋转日期表?
- javascript - 录制时如何切换网络摄像头?
- amazon-web-services - 如何让 AWS Lambda 函数访问互联网但也连接到 RDS DB
- google-sheets-api - Google 电子表格 > 表格 API
- c# - Unity 新输入系统 .started 不起作用,但 .performed 工作两次