gpt4 book ai didi

javascript - 将图像与窗口的底部边缘对齐

转载 作者:行者123 更新时间:2023-11-28 06:32:45 25 4
gpt4 key购买 nike

我已经使用 javascript 完成了一些视差滚动和调整图像大小的工作,但我不知道如何使主页与窗口边缘完美对齐。

我的代码与网页的底部边缘不对齐。

如果我设定一个固定值,我可以让它对齐;然而,根据某人是否有工具栏,它会扰乱对齐。

<!doctype html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height: 2700px;
width: 100%;
margin-top:-10px;
background-color:#4dbbac;
position: relative;
z-index:1;
}
</style>


</head>

<body onresize="myFunction()">

<img id="image" src="IMG.JPG" style="margin:;" />

<div id="content"></div>

<script>
function myFunction() {
var w = window.outerWidth;
var h = window.outerHeight;
var yourImg = document.getElementById('image');
yourImg.height = h;
yourImg.width = w;
}
</script>
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('image');
image.style.top = ypos * .5 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
</body>
</html>

最佳答案

我不确定我的问题是否正确,但为什么你不使用底部属性?

image.style.bottom = 0;

关于javascript - 将图像与窗口的底部边缘对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34554865/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com