我有一个 javascript 函数，应该使段落中的字母来自底部而不是淡入淡出，但是当我将其插入 html 中时，它只显示纯文本...该函数应该可以工作，我认为我做错了什么将其调用为 html 。我尝试设置动画的文本是标题“文本就是文本”中的文本。
主要 HTML 代码
<link rel="stylesheet" href="javascript/javascripit.js">
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="css/utilities.css">
</head>
<body>
<!-- Navbar -->
<div class ="main">
<div class="navbar ">
<div class="container flex lead ">
<nav>
<ul>
<li><a href="#">Acasa</a></li>
<li><a href="features.html">Proiecte</a></li>
<li><a href="docs.html">Recenzii</a></li>
</ul>
</nav>
<div>
<h1 class="ml7">
<span class="text-wrapper">
<span class="letters">Text is text</span>
</span>
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
</div>
<div class="social sm">
<a href="#"><i class="fab fa-facebook fa-2x"></i></a>
<a href="#"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#">Contact</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS 代码 + 实用程序
.navbar {
background-color: var(--primary-color);
color: #fff;
min-height: 80px;
position: sticky;
top: 0;
}
.navbar ul {
display: flex;
flex-direction: row;
flex-grow:1;
}
.navbar a {
color: #fff;
padding: 10px;
margin: 0 2px;
}
.navbar a:hover {
border-bottom: 2px #fff solid;
}
.navbar .flex {
justify-content:space-between;
}
.navbar .social a{
margin: 0 2px;
flex-grow:1;
}
.navbar .social > *:nth-child(3){
font-size: 28px;
}
.ml7 {
position: relative;
font-weight: 900;
font-size: 3.7em;
}
.ml7 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.2em;
padding-right: 0.05em;
padding-bottom: 0.1em;
overflow: hidden;
}
.ml7 .letters {
transform-origin: 0 100%;
display: inline-block;
line-height: 1em;
}
.container {
max-width: 1400px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
align-self: start;
}
.main {
min-height: 100vh; /*add*/
height: 3000px; /*this is a test rule*/
}
.card {
background-color: #fff;
color: #333;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 10px;
}
以及 JavaScript 函数
var textWrapper = document.querySelector('.ml7 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml7 .letter',
translateY: ["1.1em", 0],
translateX: ["0.55em", 0],
translateZ: 0,
rotateZ: [180, 0],
duration: 750,
easing: "easeOutExpo",
delay: (_el, i) => 50 * i
}).add({
targets: '.ml7',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
最佳答案
您的 HTML 尝试加载您的 Javascript，就好像它是样式表一样。查看您的浏览器开发工具，您可能会在 Javascript 控制台中看到错误。使用<script src="whatever.js"></script>加载脚本。在你的情况下，这可能是:
<script src="javascript/javascripit.js"></script> /*mis-spelled name?? */
而且，您在评论中询问了将 < script></script> 放在哪里标签。许多人将它们放在 HTML 页面的末尾，紧邻 </body> 之前。标签。这使得浏览器可以在获取 Javascript 代码之前获取渲染页面所需的图像对象，并提供更好的用户体验。
无论您将 <script></script> 放在哪里标签、像您这样操作页面文档对象模型 (DOM) 的 Javascript 代码应该作为 the DOMContentLoaded event 的事件处理程序运行。 。换句话说，将您的 Javascript 封装在其中。
document.addEventListener('DOMContentLoaded', (event) => {
/* all your Javascript goes here */
});
这样它就不会在页面加载之前运行。如果您不这样做，并且您的 Javascript 恰好在 HTML 完全加载之前运行，那么您的 .querySelector()操作可能会返回 null，导致您的 Javascript 失败。
浏览器尝试并行执行许多操作，以加快点击到页面可见的时间。
关于HTML 无法识别 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65550217/