Question

我已经完成了一些视差滚动和使用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>

Answer 1

我不确定我的问题是否正确，但为什么你不使用底层财产？

image.style.bottom = 0;

将图像与窗口的下边缘对齐

1 个答案: