Javascript动画未显示
所以基本上，我想使用一些似乎适用于 codepen 的东西。CodePen 的链接在这里： https ://codepen.io/anon/pen/JMOQzE
主要问题：Javascript 应该处理动画但没有出现。感谢评论区的提醒
我基本上复制了所有的 CSS 和 Javascript。然后我的 HMTL 看起来像这样：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" >
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>
<div class = "wrapper">
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</div>
</body>
</html>
而且动画没有出现。如上所示，我确保在那里链接 jQuery。我在 VSCode 中尝试了 control+click，它链接到了正确的文件。控制台上也没有错误消息。我迷路了。可能是什么问题呢？谢谢
Smart猫小萌浏览 162回答 2
2回答
-
温温酱
完成加载 HTML 后，您可能需要执行 javascript 代码。在此处输入您的代码$( document ).ready(function() { // HERE});更多信息：https ://learn.jquery.com/using-jquery-core/document-ready/ -
摇曳的蔷薇
此代码适用于我在 chrome 浏览器中只需在声明后调用您的 create 函数。您也可以使用文档准备功能function create(i) { var width = Math.random() * 8; var height = width * 0.4; var colourIdx = Math.ceil(Math.random() * 3); var colour = "red"; switch (colourIdx) { case 1: colour = "yellow"; break; case 2: colour = "blue"; break; default: colour = "red"; } $('<div class="confetti-' + i + ' ' + colour + '"></div>').css({ "width": width + "px", "height": height + "px", "top": -Math.random() * 20 + "%", "left": Math.random() * 100 + "%", "opacity": Math.random() + 0.5, "transform": "rotate(" + Math.random() * 360 + "deg)" }).appendTo('.wrapper'); drop(i);}function drop(x) { $('.confetti-' + x).animate({ top: "100%", left: "+=" + Math.random() * 15 + "%" }, Math.random() * 3000 + 3000, function() { reset(x); });}function reset(x) { $('.confetti-' + x).animate({ "top": -Math.random() * 20 + "%", "left": "-=" + Math.random() * 15 + "%" }, 0, function() { drop(x); });}for (var i = 0; i < 250; i++) { create(i);}body { margin: 0; overflow: hidden;}.wrapper { position: relative; min-height: 100vh; border: 1px solid red;}[class|="confetti"] { position: absolute;}.red { background-color: #E94A3F;}.yellow { background-color: #FAA040;}.blue { background-color: #5FC9F5;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrapper"></div>
随时随地看视频慕课网APP
相关分类
JavaScript