我不能直接从 Codepen 获取这个动画横幅。我认为一切都已正确链接，为什么它不起作用？

Question

我在 codepen 上发现了这个很酷的小 HTML 5 横幅，想玩玩 javascript。但是，当我将所有代码 'as is' 分别转录到桌面上一个公共文件夹中的单独文档时，.js 函数 none 似乎可以正常工作。我认为要么是 .js 文件有问题，要么是它没有正确地提取 TweenMax.min.js 库。我尝试下载该库并将其放入桌面上的新文件中，但没有成功。 url 或文件路径似乎都不起作用。以下是我如何链接所有文件的示例。这有意义吗？谁能给我一些建议？将不胜感激。

http://codepen.io/emilychadraba/pen/pvLjzm

<!doctype html>
<html>
<head> 
<meta charset="UTF-8">
<link href="codepen.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="codepen.js"></script>
<script type="text/javascript" src="TweenMax.min.js"></script>
</head>

<body>
<div class="banner crop">

<img id="photo" src="http://bestevents.us/wp-content/uploads/2014/09/1409861249_10536823_10152285336897304_4970023981985043307_o.png"/>

<img id="beer1" class="absolute-left" src="http://www.gooseisland.com/content/gooseisland/en/goose/allBeers/_jcr_content/urbanAles/addbeer/sImage" />

<img id="beer2" class="absolute-center" src="http://www.gooseisland.com/content/gooseisland/en/goose/allBeers/_jcr_content/urbanAles/addbeer_1/sImage" />

<img id="beer3" class="absolute-right" src="http://www.gooseisland.com/content/gooseisland/en/goose/allBeers/_jcr_content/urbanAles/addbeer_0/sImage" />

<img id="logo" class= "absolute" src="http://www.gooseisland.com/assets/images/header-logo.png" </img>

<h2 id="hed1"> Introducing This Year's <br> Beverage Lineup </br> </h2>
<h2 id="hed2"> 312 Urban Block Party </h2>
<h3 id="hed3"> hosted by Goose Island </h3>
<h2 id="cta"> Join the Party </h2>
<h6 id="pale"> 312 Urban Pale Ale </h6>
<h6 id="wheat"> 312 Urban Wheat Ale </h6>
<h6 id="green"> Green Line Pale Ale </h6>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js">   </script>
</banner> 
</body>
</html>

Answer 1

您似乎在加载 TweenMax 库和 DOM 准备就绪之前尝试执行脚本。尝试下面的 html 确保 codepen.js 是 body 标签中的最后一个元素，以确保它是运行最后一个。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <link href="codepen.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="TweenMax.min.js"></script>
  </head>

  <body>

    <script type="text/javascript" src="codepen.js"></script>
  </body>

</html>

我不能直接从 Codepen 获取这个动画横幅。我认为一切都已正确链接，为什么它不起作用？

I can't take this animated banner directly from Codepen. I think everything is properly linked so why won't it work?

javascript

html

gsap

tween.js