我正在尝试在 codepen.io 站点中使用一段 html、css、javascript 代码 This is the link to the sample i want to use
但是当我把它放在我的代码中时，我想 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>
html代码中引用的css样式表和js脚本与codepen中的示例代码相同。
我正在使用 byethost 服务器在 Linux 服务器内核版本 3.2.40 中使用 apache 2.2.15 对其进行测试
我想知道示例中的文本为什么不像 codepen 网站那样旋转。
谢谢
最佳答案
您的 Codepen 有两个您没有包含的外部脚本。
此外，您已将自定义脚本放在 <head> 中元素，但 Codepen 将其包含在 <body> 的末尾，就在你的 </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>
此外，删除 <script src="js/scripts.js" type="text/javascript"></script>从你的<head>元素
另一件事 - 不相关但您的结束 head 标签缺少 / - 应该是 </head>不是<head> .
根据我的回答，这是您完整的 HTML 代码:
<!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>
关于javascript - JS 中的动画文本在我这里不起作用，但在 Codepen 示例中起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37348687/