首頁猿問 Javascript動畫未顯示

Javascript動畫未顯示

JavaScript

Smart貓小萌 2022-07-08 10:52:34

所以基本上，我想使用一些似乎適用于 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/

反對回復 2022-07-08

搖曳的薔薇

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;

}

反對回復 2022-07-08

2 回答
0 關注
159 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript動畫未顯示

Javascript動畫未顯示

2 回答

添加回答