如何使标头动画仅在javascript中显示onload事件(不允许jQuery）

How to make a header animation appear with an onload event in javascript only (no jQuery allowed)

本文关键字：事件 onload 不允许 jQuery 显示 何使标 动画 javascript      更新时间：2023-09-26

我正在尝试获得带有站点标题的动画效果。动画过程很简单：我只想让标题从顶部 -120px 滑到底部并保持在该位置。我设法让它从我在互联网上找到的代码片段运行，但它仅适用于 onclick 事件侦听器。当我尝试将其更改为与onload事件侦听器一起使用时，它将不起作用，并且我不知道问题的原因是什么。

这是主页的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="script/headJS.js"></script>
    </head>
    <body>
        <?php
        if(!isset($_SESSION['user'])){
            require_once("pages/firstPage.php");
        }else{
            require_once("pages/secondPage.php");
        }
        ?>
        <script src="script/bodyJS.js"></script>
    </body>
</html>

因此，每当用户未登录时.php我都会用PHP加载另一个名为firstPage的页面。firstPage.php的代码如下：

<div class="container" onclick="move(this.children[0]);">
    <div class="antet">
        <p id="logo"><a href="index.php">Web Ideas</a></p>
    </div>
</div>

和 bodyJS.js 脚本文件具有以下代码：

function move(elem) {
    var top = -130;
    function frame() {
        top++;
        elem.style.top = top + "px";
        if (top == 0) {
            clearInterval(id);
        }
    }
    var id = setInterval(frame, 10);
}

页面的 CSS 如下：

body, ul, ol, p, h1, h2, h3, h4, h5, h6, table, tr, td, dd, dt, dl, div, pre {
    margin: 0;
    padding: 0;
    border: 0;
}
body{
    position: relative;
    background: #a9a9a9;
    font-size: 16px;
}
.container{
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1349px;
    min-height: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.antet{
    position: relative;
    width: 1349px;
    height: 100px;
    background-color: #19355b;
    margin: 0 auto;
    border-bottom: 2px solid white;
}
@font-face{
    font-family: 'Iceland';
    font-style: normal;
    font-weight: 400;
    src: local('Iceland'), local('Iceland-Regular'), url("http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff") format("woff");
}
@-webkit-keyframes neon{
    from{
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #a9a9a9, 0 0 70px #a9a9a9, 0 0 80px #a9a9a9,
            0 0 100px #a9a9a9, 0 0 150px #a9a9a9;
    }
    to{
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #a9a9a9, 0 0 35px #a9a9a9, 0 0 40px #a9a9a9,
            0 0 50px #a9a9a9, 0 0 75px #a9a9a9;
    }
}
@-moz-keyframes neon {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #a9a9a9, 0 0 70px #a9a9a9, 0 0 80px #a9a9a9, 0 0 100px #a9a9a9, 0 0 150px #a9a9a9;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #a9a9a9, 0 0 35px #a9a9a9, 0 0 40px #a9a9a9, 0 0 50px #a9a9a9, 0 0 75px #a9a9a9;
    }
}
@keyframes neon {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #a9a9a9, 0 0 70px #a9a9a9, 0 0 80px #a9a9a9, 0 0 100px #a9a9a9, 0 0 150px #a9a9a9;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #a9a9a9, 0 0 35px #a9a9a9, 0 0 40px #a9a9a9, 0 0 50px #a9a9a9, 0 0 75px #a9a9a9;
    }
}
#logo{
    position: relative;
    width: 321px;
    margin: 0 auto;
}
#logo a:hover{
    color: #ffffff;
}
#logo a{
    text-decoration: none;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
p:nth-child(1) a{
    font-size: 5em;
    color: rgba(37, 220, 57, 0.8);
    font-family: 'Iceland', Helvetica, sans-serif;
}
p:nth-child(1) a:hover{
    -webkit-animation: neon 1.5s ease-in-out infinite alternate;
    -moz-animation: neon 1.5s ease-in-out infinite alternate;
    animation: neon 1.5s ease-in-out infinite alternate;
}
使用onclick事件侦听器

一切正常，但是当我尝试将其切换到onload事件侦听器时，页面将加载，但没有任何动画。儿童div 的位置不会改变。我认为这是因为需要加载 DOM，然后触发事件侦听器，所以我在页面中切换了 body 元素底部的 <script></script> 标签。我该如何解决这个问题？欢迎任何帮助或提示，提前感谢伙计们。

JSFiddle 与 onclick 事件侦听器有效

我添加了一个有效的事件侦听器。你只需要在调用移动函数时更改引用div 的方式：

window.addEventListener("DOMContentLoaded", function() { 
   move(document.querySelector(".container").children[0]); 
});

只需将其放在bodyJS.js文件的顶部（在移动功能上方）。

请参阅此工作小提琴：https://jsfiddle.net/sgLqz58n/3/

我已经设置了绝对定位，但您也可以.scrolled类中更改该属性。您可以查看此垃圾箱以获取解决方案

http://jsbin.com/qogasodetu/edit?html,css,js,output

更改的 CSS -

.container{
    position: fixed;
    top: -130px;
    transition: all linear 250ms;
    width: 100%;
    height: 100%;
    min-width: 1349px;
    min-height: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.scrolled {
    top: 0;
}

更改了 JS

document.addEventListener('DOMContentLoaded', function() {
    var elm = document.querySelector('.container');
    setTimeout(function() {
        elm.classList.add('scrolled');
    }, 500);
});

您可以尝试触发页面加载点击。

您也可以尝试手动调用move，但我建议使用单击事件本身。但是如果你对click有一些特殊的处理，那么你可以调用move()。

此外，您可以使用load或DOMContentLoaded事件来调用函数。

<小时 />

正如@Scott马库斯正确建议的那样，最好使用window.addEventListener("DOMContentLoaded", function(){})而不是window.onload = function(){} 。以下是更新的小提琴。

更新的 JSFiddle - 移动

<小时 />

以下是演示

使用单击

JSFiddle.

window.onload = function() {
  document.getElementById("header").click();
}
<小时 />

使用移动

JSFiddle

window.onload = function() {
  move(document.getElementById("header").children[0])
}
相关文章：