如何包含外部 CDN 库？
How to include external CDN library?
我试过放置
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
在我的代码中到处都是，它不会工作。我已经看到很多 post 有同样的问题，但他们中的大多数人说之前就放置了 cdn，但它仍然对我不起作用。我曾尝试下载 gsap.min.js 文件并将其放在与我的 html 文件相同的文件夹中，但它也无法正常工作。我正在使用 Visual Studio 代码。但在此之前我正在使用 Codepen 并且一切正常。
这是我的完整代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {
svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)
});
$(document).ready(function() {
$('.circle').click(function() {
var relation = $(this).data('relation');
var squareReltedToClick = $("#content").find('#' + relation);
$('.sq').removeClass('active');
squareReltedToClick.addClass('active');
var bgColor = $(this).css('fill');
$('.sq').css('background-color', bgColor);
});
});
</script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
<circle id="wheel" class="st1 c9 circle" data-relation="square9" cx="371.06" cy="346.49" r="50"/>
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
<circle id="wheel" class="st2 c8 circle" data-relation="square8" cx="267.39" cy="406.34" r="50"/>
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
<circle id="wheel" class="st3 c7 circle" data-relation="square7" cx="149.5" cy="385.55" r="50"/>
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
<circle id="wheel" class="st4 c6 circle" data-relation="square6" cx="72.55" cy="293.85" r="50"/>
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
<circle id="wheel" class="st5 c5 circle" data-relation="square5" cx="72.55" cy="174.15" r="50"/>
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
<circle id="wheel" class="st6 c4 circle" data-relation="square4" cx="149.5" cy="82.45" r="50"/>
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
<circle id="wheel" class="st7 c3 circle" data-relation="square3" cx="267.39" cy="61.66" r="50"/>
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
<circle id="wheel" class="st8 c2 circle" data-relation="square2" cx="371.06" cy="121.51" r="50"/>
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
<circle id="wheel" class="st9 c1 circle" data-relation="square1" cx="412" cy="234" r="50"/>
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq active" id="square1">1</div>
<div class="content2 sq" id="square2">2</div>
<div class="content3 sq" id="square3">3</div>
<div class="content4 sq" id="square4">4</div>
<div class="content5 sq" id="square5">5</div>
<div class="content6 sq" id="square6">6</div>
<div class="content7 sq" id="square7">7</div>
<div class="content8 sq" id="square8">8</div>
<div class="content9 sq" id="square9">9</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
库需要连接到您的主要 JavaScript 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="main.css">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z" />
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07" />
<circle id="wheel" class="st1 c9 circle" data-relation="square9" cx="371.06" cy="346.49" r="50" />
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99" />
<circle id="wheel" class="st2 c8 circle" data-relation="square8" cx="267.39" cy="406.34" r="50" />
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25" />
<circle id="wheel" class="st3 c7 circle" data-relation="square7" cx="149.5" cy="385.55" r="50" />
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75" />
<circle id="wheel" class="st4 c6 circle" data-relation="square6" cx="72.55" cy="293.85" r="50" />
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25" />
<circle id="wheel" class="st5 c5 circle" data-relation="square5" cx="72.55" cy="174.15" r="50" />
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75" />
<circle id="wheel" class="st6 c4 circle" data-relation="square4" cx="149.5" cy="82.45" r="50" />
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01" />
<circle id="wheel" class="st7 c3 circle" data-relation="square3" cx="267.39" cy="61.66" r="50" />
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94" />
<circle id="wheel" class="st8 c2 circle" data-relation="square2" cx="371.06" cy="121.51" r="50" />
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234" />
<circle id="wheel" class="st9 c1 circle" data-relation="square1" cx="412" cy="234" r="50" />
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq active" id="square1">1</div>
<div class="content2 sq" id="square2">2</div>
<div class="content3 sq" id="square3">3</div>
<div class="content4 sq" id="square4">4</div>
<div class="content5 sq" id="square5">5</div>
<div class="content6 sq" id="square6">6</div>
<div class="content7 sq" id="square7">7</div>
<div class="content8 sq" id="square8">8</div>
<div class="content9 sq" id="square9">9</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBox();
gsap.set(".wheel", {
svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)
});
$(document).ready(function() {
$('.circle').click(function() {
var relation = $(this).data('relation');
var squareReltedToClick = $("#content").find('#' + relation);
$('.sq').removeClass('active');
squareReltedToClick.addClass('active');
var bgColor = $(this).css('fill');
$('.sq').css('background-color', bgColor);
});
});
</script>
</body>
</html>
使用前需要将script标签放在head标签中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
在使用之前移动您的外部库。例如，将包含的脚本标签放在其他 javascript 之前！这样 jquery 就不会无效了！将它们放在您的 header 或其他 javascript!
之前
我试过放置
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
在我的代码中到处都是，它不会工作。我已经看到很多 post 有同样的问题，但他们中的大多数人说之前就放置了 cdn，但它仍然对我不起作用。我曾尝试下载 gsap.min.js 文件并将其放在与我的 html 文件相同的文件夹中，但它也无法正常工作。我正在使用 Visual Studio 代码。但在此之前我正在使用 Codepen 并且一切正常。 这是我的完整代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {
svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)
});
$(document).ready(function() {
$('.circle').click(function() {
var relation = $(this).data('relation');
var squareReltedToClick = $("#content").find('#' + relation);
$('.sq').removeClass('active');
squareReltedToClick.addClass('active');
var bgColor = $(this).css('fill');
$('.sq').css('background-color', bgColor);
});
});
</script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
<circle id="wheel" class="st1 c9 circle" data-relation="square9" cx="371.06" cy="346.49" r="50"/>
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
<circle id="wheel" class="st2 c8 circle" data-relation="square8" cx="267.39" cy="406.34" r="50"/>
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
<circle id="wheel" class="st3 c7 circle" data-relation="square7" cx="149.5" cy="385.55" r="50"/>
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
<circle id="wheel" class="st4 c6 circle" data-relation="square6" cx="72.55" cy="293.85" r="50"/>
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
<circle id="wheel" class="st5 c5 circle" data-relation="square5" cx="72.55" cy="174.15" r="50"/>
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
<circle id="wheel" class="st6 c4 circle" data-relation="square4" cx="149.5" cy="82.45" r="50"/>
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
<circle id="wheel" class="st7 c3 circle" data-relation="square3" cx="267.39" cy="61.66" r="50"/>
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
<circle id="wheel" class="st8 c2 circle" data-relation="square2" cx="371.06" cy="121.51" r="50"/>
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
<circle id="wheel" class="st9 c1 circle" data-relation="square1" cx="412" cy="234" r="50"/>
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq active" id="square1">1</div>
<div class="content2 sq" id="square2">2</div>
<div class="content3 sq" id="square3">3</div>
<div class="content4 sq" id="square4">4</div>
<div class="content5 sq" id="square5">5</div>
<div class="content6 sq" id="square6">6</div>
<div class="content7 sq" id="square7">7</div>
<div class="content8 sq" id="square8">8</div>
<div class="content9 sq" id="square9">9</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
库需要连接到您的主要 JavaScript 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="main.css">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z" />
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07" />
<circle id="wheel" class="st1 c9 circle" data-relation="square9" cx="371.06" cy="346.49" r="50" />
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99" />
<circle id="wheel" class="st2 c8 circle" data-relation="square8" cx="267.39" cy="406.34" r="50" />
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25" />
<circle id="wheel" class="st3 c7 circle" data-relation="square7" cx="149.5" cy="385.55" r="50" />
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75" />
<circle id="wheel" class="st4 c6 circle" data-relation="square6" cx="72.55" cy="293.85" r="50" />
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25" />
<circle id="wheel" class="st5 c5 circle" data-relation="square5" cx="72.55" cy="174.15" r="50" />
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75" />
<circle id="wheel" class="st6 c4 circle" data-relation="square4" cx="149.5" cy="82.45" r="50" />
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01" />
<circle id="wheel" class="st7 c3 circle" data-relation="square3" cx="267.39" cy="61.66" r="50" />
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94" />
<circle id="wheel" class="st8 c2 circle" data-relation="square2" cx="371.06" cy="121.51" r="50" />
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234" />
<circle id="wheel" class="st9 c1 circle" data-relation="square1" cx="412" cy="234" r="50" />
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq active" id="square1">1</div>
<div class="content2 sq" id="square2">2</div>
<div class="content3 sq" id="square3">3</div>
<div class="content4 sq" id="square4">4</div>
<div class="content5 sq" id="square5">5</div>
<div class="content6 sq" id="square6">6</div>
<div class="content7 sq" id="square7">7</div>
<div class="content8 sq" id="square8">8</div>
<div class="content9 sq" id="square9">9</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBox();
gsap.set(".wheel", {
svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)
});
$(document).ready(function() {
$('.circle').click(function() {
var relation = $(this).data('relation');
var squareReltedToClick = $("#content").find('#' + relation);
$('.sq').removeClass('active');
squareReltedToClick.addClass('active');
var bgColor = $(this).css('fill');
$('.sq').css('background-color', bgColor);
});
});
</script>
</body>
</html>
使用前需要将script标签放在head标签中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
在使用之前移动您的外部库。例如，将包含的脚本标签放在其他 javascript 之前！这样 jquery 就不会无效了！将它们放在您的 header 或其他 javascript!
之前