Javascript JS中的动画文本在我的位置不起作用，但在代码笔示例中起作用_Javascript_Html_Css

Javascript JS中的动画文本在我的位置不起作用，但在代码笔示例中起作用

javascript html css

Javascript JS中的动画文本在我的位置不起作用，但在代码笔示例中起作用,javascript,html,css,Javascript,Html,Css,我试图在codepen.io网站中使用一段html、css和javascript代码但当我把它放在代码中时，我认为javascript函数不起作用这是我使用它的html代码 <!DOCTYPE html> <html> <head> <title>Sorteo USB Solutions</title> <link rel="stylesheet" type="text/css" href="css/styles.css"&g

我试图在codepen.io网站中使用一段html、css和javascript代码

但当我把它放在代码中时，我认为javascript函数不起作用

这是我使用它的html代码

<!DOCTYPE html>
<html>
<head>
<title>Sorteo USB Solutions</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/scripts.js" type="text/javascript"></script>
<head>
<body onload="funtion()">
    <section class="full-screen">
        <div class="wheel-03">
            <svg preserveAspectRatio="xMinYMin meet" class="wheel-svg" version="1.1"
                 width="800" height="400"
                 viewBox="0 0 800 400">
                <g transform="translate(0,0)">
                    <g transform="translate(0,250)" class="wheel-container">
                        <text x="0" y="-225" class="term term00">SMELL</text>
                        <text x="0" y="-150" class="term term01">HELL</text>
                        <text x="0" y="-75" class="term term02">SHOCK</text>
                        <text x="0" y="0" class="term term03">BRAND</text>
                        <text x="0" y="75" class="term term04">COOL</text>
                        <text x="0" y="150" class="term term05">NICE</text>
                        <text x="0" y="225" class="term term06">EYE</text>
                        <text x="0" y="300" class="term term07">SMELL</text>
                        <text x="0" y="375" class="term term08">HELL</text>
                        <text x="0" y="450" class="term term09">SHOCK</text>
                        <text x="0" y="525" class="term term10">BRAND</text>
                        <text x="0" y="600" class="term term11">COOL</text>
                        <text x="0" y="675" class="term term12">ROQUE SANTA  CRUZ</text>
                        <text x="0" y="750" class="term term13">EYE</text>
                    </g>
                </g>
            </svg>
        </div>
    </section>

</body>
</html>


Sorteo USB解决方案
气味
高等教育教学实验室
震惊
烙印
酷
美好的
眼睛
气味
高等教育教学实验室
震惊
烙印
酷
圣克鲁斯酒店
眼睛

html代码中引用的css样式表和js脚本包含与codepen中的示例相同的代码

我正在使用byethost服务器在linux服务器内核版本3.2.40中使用Apache2.2.15对其进行测试

我想在示例中了解为什么文本不像codepen站点中那样旋转

谢谢

您的代码笔有两个您没有包含的外部脚本

此外，您已将自定义脚本放置在

元素中，但Codepen将其包含在

末尾，紧跟在

之后

所以你最终会得到：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>

请在你的问题中写一篇文章。您遗漏了JavaScript和CSS。请在此处发布您的JS代码-您在项目中使用的确切代码。如果您查看开发人员工具中的控制台并阅读其中的错误消息，问题应该非常明显。这是什么：

应该做什么？重复：@FerMirabelli很高兴我能提供帮助：）

<!DOCTYPE html>
<html>
<head>
<title>Sorteo USB Solutions</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body onload="funtion()">
<section class="full-screen">
    <div class="wheel-03">
        <svg preserveAspectRatio="xMinYMin meet" class="wheel-svg" version="1.1"
             width="800" height="400"
             viewBox="0 0 800 400">
            <g transform="translate(0,0)">
                <g transform="translate(0,250)" class="wheel-container">
                    <text x="0" y="-225" class="term term00">SMELL</text>
                    <text x="0" y="-150" class="term term01">HELL</text>
                    <text x="0" y="-75" class="term term02">SHOCK</text>
                    <text x="0" y="0" class="term term03">BRAND</text>
                    <text x="0" y="75" class="term term04">COOL</text>
                    <text x="0" y="150" class="term term05">NICE</text>
                    <text x="0" y="225" class="term term06">EYE</text>
                    <text x="0" y="300" class="term term07">SMELL</text>
                    <text x="0" y="375" class="term term08">HELL</text>
                    <text x="0" y="450" class="term term09">SHOCK</text>
                    <text x="0" y="525" class="term term10">BRAND</text>
                    <text x="0" y="600" class="term term11">COOL</text>
                    <text x="0" y="675" class="term term12">ROQUE SANTA  CRUZ</text>
                    <text x="0" y="750" class="term term13">EYE</text>
                </g>
            </g>
        </svg>
    </div>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>