Question

我是编码的初学者。我想在这个页面上做有效的事情 - http://tympanus.net/Development/AnimatedHeaderBackgrounds

我使用此站点和GreenSock GSAP动画库中的脚本。但我无法将其与我的网站连接。这是我的HTML：

  <div id="container">
    <canvas id="demo-canvas" width="1400" height="622"></canvas>
  </div>

和我使用Id元素的javascript的一部分：

largeHeader = document.getElementById('container');
    largeHeader.style.height = height+'px';

    canvas = document.getElementById('demo-canvas');
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext('2d');

当我使用这个javascript代码时，我收到此错误“TypeError：largeHeader为null”。

如何正确使用此效果？

Answer 1

你的代码是

吗？

a）在<body>元素的末尾，或
b）包装在DOM就绪处理程序中？

否则，您将在DOM元素存在之前引用它。

这是为DOM准备好包装它的一种方法（具有本地作用域$的快捷方式处理程序）：

jQuery(function($){
    var largeHeader = document.getElementById('container');
    largeHeader.style.height = height+'px';

    var canvas = document.getElementById('demo-canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
});

注意：

传统的DOM就绪处理程序是$(document).ready(function(){ YOUR CODE });，但快捷方式更好
还使用var声明局部变量。否则他们会污染全球范围。

如何创建跟随鼠标移动 - JavaScript？

1 个答案: