Question

如何更新屏幕上的屏幕高度调整大小（缩放）？每次我缩放屏幕时，我都会破坏箭头。

另外我想问你，如果我在屏幕上显示图像的方式是好的方式......每次滚动都应该作为视差网站制作向下，它应该变成另一个尖锐的（＃）并滚动到不同的内容，它将放在下面。当你点击箭头时的移动并不是很平滑，它只会被改变，但不能顺利进行，这是一个我猜的问题......

这是我的代码：

    /* Resize to fit screen */
window.onload = function() {
    var height = getViewportHeight();
    document.getElementById("main").style.height = height + "px";
    document.getElementById("lobby").style.height = height + "px";
}

function getViewportHeight() {
    var h = 0;
    if(self.innerHeight)
        h = window.innerHeight;
    else if(document.documentElement && document.documentElement.clientHeight)
        h = document.documentElement.clientHeight;
    else if(document.body) 
        h = document.body.clientHeight;
    return h;
}

HTML：

<!DOCTYPE html>
<html lang="cs">
    <head>
        <title>Zahrajem.cz | Nový československý herní portál</title>
        <meta charset="utf-8">
        <meta name="author" content="Jan Dvořák">
        <meta name="description" content="Zahrajem.cz | Nový český herní portál">
        <meta name="version" content="1.0">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700">
        <script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body>
        <section id="main">
            <div class="container">
                <div class="header">
                    <img src="img/z_logo.png"/>
                </div>

                <div class="footer">
                    <a href="#lobby"><img src="img/z_down.png"/></a>
                </div>
            </div>
        </section>

        <section id="lobby">
            <div class="container">
                <div class="header">
                    <a href="#main"><img src="img/z_up.png"/></a>
                </div>          
            </div>
        </section>
    </body>
</html>

CSS：

html, body {
    font-family: "Open Sans", "sans-serif";
}

* {
    padding: 0;
    margin: 0;
}



/* ANIMATION */
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.92, 0.92);}
    100% {-webkit-transform: scale(1.0, 1.0);}
}
@-moz-keyframes pulsate {
    0% {-webkit-transform: scale(0.92, 0.92);}
    100% {-webkit-transform: scale(1.0, 1.0);}
}
@keyframes pulsate {
    0% {-webkit-transform: scale(0.92, 0.92);}
    100% {-webkit-transform: scale(1.0, 1.0);}
}

@-webkit-keyframes arr {
    0% {opacity: 0.4;}
    100% {opacity: 1.0;}
}
@-moz-keyframes arr {
    0% {opacity: 0.4;}
    100% {opacity: 1.0;}
}
@keyframes arr {
    0% {opacity: 0.4;}
    100% {opacity: 1.0;}
}



/* STRUCTURE */
#main {
    overflow: auto;
    background-image: url('/img/z_background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    display: block;
}

#main .container {
    margin: auto;
    text-align: center;
}

#main .container .header {
    margin-top: 10%;
}

#main .container .header img {
    -webkit-animation: pulsate 2s ease-in-out infinite alternate;
    -moz-animation: pulsate 2s ease-in-out infinite alternate;
    animation: pulsate 2s ease-in-out infinite alternate;
}

#main .container .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#main .container .footer img {
    width: 50px;
    height: 50px;
    opacity: 0.4;
}
#main .container .footer img:hover {
    -webkit-animation: arr 0.7s ease-out infinite alternate;
    -moz-animation: arr 0.7s ease-out infinite alternate;
    animation: arr 0.7s ease-out infinite alternate;
}

/* LOBBY */

#lobby {
    overflow: auto;
    background-image: url('/img/z_lobby_bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    display: block;
}

#lobby .container {
    margin: auto;
    text-align: center;
}

#lobby .container .header {
    position: absolute;
    left: 0;
    right: 0;
}

#lobby .container .header img {
    width: 50px;
    height: 50px;
    opacity: 0.4;
}
#lobby .container .header img:hover {
    -webkit-animation: arr 0.7s ease-out infinite alternate;
    -moz-animation: arr 0.7s ease-out infinite alternate;
    animation: arr 0.7s ease-out infinite alternate;
}

如果您发现错误或可以更好地制作某些内容，请随时更正我当前的代码。我想会有很多错误，所以我请你帮我解决我的错误并帮助我一点。

预览：http://zahrajem.cz/

Answer 1

就像onload我们有一个onresize - 事件：

window.onresize = function(event) {
    var height = getViewportHeight();
    document.getElementById("main").style.height = height + "px";
    document.getElementById("lobby").style.height = height + "px";
};

jQuery - 屏幕调整大小更新

1 个答案: