所以基本上，我想使用一些似乎适用于 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，它链接到了正确的文件。控制台上也没有错误消息。我迷路了。可能是什么问题呢？谢谢
2 回答
温温酱
TA贡献1752条经验 获得超4个赞
完成加载 HTML 后，您可能需要执行 javascript 代码。
在此处输入您的代码
$( document ).ready(function() {
// HERE
});
更多信息：https ://learn.jquery.com/using-jquery-core/document-ready/
摇曳的蔷薇
TA贡献1793条经验 获得超6个赞
此代码适用于我在 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>
添加回答
举报
0/150
提交
取消