Fatal编程技术网
  • javascript/
  • Javascript 如何包含外部CDN库？

Javascript 如何包含外部CDN库？

javascript html jquery

Javascript 如何包含外部CDN库？,javascript,html,jquery,gsap,Javascript,Html,Jquery,Gsap,我已经试过了 <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 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>
在我的代码中的任何地方，它都不起作用。我见过不少帖子都有同样的问题，但大多数帖子都说在之前就放置了cdn，但对我来说仍然不起作用。我曾尝试下载gsap.min.js文件，并将其放在与html文件相同的文件夹中，但它也无法工作。我正在使用VisualStudio代码。但在此之前，我使用代码笔，一切都很好。 这是我的全部代码

<!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>


轮
设圆=gsap.utils.toArray（[“.c1”、“.c2”、“.c3”、“.c4”、“.c5”、“.c6”、“.c7”、“.c8”、“.c9”]），
角度增量=360/圈。长度；
圆。forEach（函数（圆，索引）{
circle.addEventListener（“单击”，函数（）{
gsap.to（“.wheel”{
旋转：（索引*角度增量）+“_短”，
持续时间：1，
轻松：“power1.inOut”
});
});
});
让bounds=document.querySelector（“.st0”）.getBBox（）；
gsap.set（“.wheel”{
svgOrigin：（bounds.x+bounds.width/2）+++（bounds.y+bounds.height/2）
});
$（文档）.ready（函数（）{
$（'.circle'）。单击（函数（）{
变量关系=$（this）.data（'relation'）；
var squareReltedToClick=$（“#内容”）.find（“#”+关系）；
$（'.sq'）.removeClass（'active'）；
squareReltedToClick.addClass（'active'）；
var bgColor=$（this.css（'fill'）；
$（'.sq'）.css（'background-color'，bgColor）；
});
});
1.
2.
3.
4.
5.
6.
7.
8.
9
库需要连接到主JavaScript代码


轮
1.
2.
3.
4.
5.
6.
7.
8.
9
设圆=gsap.utils.toArray（[“.c1”、“.c2”、“.c3”、“.c4”、“.c5”、“.c6”、“.c7”、“.c8”、“.c9”]），
角度增量=360/圈。长度；
圆。forEach（函数（圆，索引）{
circle.addEventListener（“单击”，函数（）{
gsap.to（“.wheel”{
旋转：（索引*角度增量）+“_短”，
持续时间：1，
轻松：“power1.inOut”
});
});
});
让bounds=document.querySelector（“.st0”）.getBox（）；
gsap.set（“.wheel”{
svgOrigin：（bounds.x+bounds.width/2）+++（bounds.y+bounds.height/2）
});
$（文档）.ready（函数（）{
$（'.circle'）。单击（函数（）{
变量关系=$（this）.data（'relation'）；
var squareReltedToClick=$（“#内容”）.find（“#”+关系）；
$（'.sq'）.removeClass（'active'）；
squareReltedToClick.addClass（'active'）；
var bgColor=$（this.css（'fill'）；
$（'.sq'）.css（'background-color'，bgColor）；
});
});
在使用脚本标记之前，需要将脚本标记放在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就不会无效了！把它们放在你的头或者其他javascript之前

只要在代码中使用
$（）
，jQuery必须已经加载。将jQuery脚本移到您自己的脚本上方（或将其放入），我总是将其放在头部。它对我有效，有什么问题吗？@Abhishek它没有给出任何错误，但是SVG应该有动画。我曾尝试将它移到头部，但它也不起作用。GSAP有视频和可复制/粘贴的代码，可以帮助您开始。这是错误的信息，没有必要将它放在
头部
-只需要在使用它之前就可以了。@freedomn-m，您不应该将其称为“错误信息”，这是许多方法中的一种。我希望你明白我的意思。请不要在明显离题/糟糕的问题上发布答案！帮助别人没有什么错。不过，你也可以在评论中这样做！请不要在明显离题/糟糕的问题上发布答案！