使用（可能）处理.js 使某些对象发生变化或移动的悬停效果？

Question

我花了一整夜的时间来弄清楚这个网站上的悬停效果http://goo.gl/WXlGT 是如何工作的。但我仍然无法得到它。起初我认为它是用 Flash 制作的，而不是我认为的 html5，但最后我发现它使用 processing.js（我可能是错的）。我检查了他们的网站，但我不知道该怎么做。

我想知道的是如何使一个对象（例如菜单）的悬停效果使其他对象（例如徽标）发生变化或移动。我正在寻找的完美示例在这里：http://goo.gl/I777F。

非常感谢任何有关网络手册的帮助或提示。谢谢！

Answer 1

这是一个通用的面向对象编程问题，有一个通用的面向对象的答案。在通用处理代码中：

ArrayList<Drawable> things;

...

void somePlacementFunction() {
  ...
  things.add(new Drawable(<some parameters>));
  ... 
}

...

void draw() {
  for(Drawable things: things) {
    thing.draw();
  }
}

...

void mouseMoved() {
  for(Drawable thing: things) {
    if(thing.over(mouseX, mouseY)) {
      Drawable differentThing = getOtherThing(...);
      differentThing.changeSomePropertyThatAffectsHowItGetsDrawn();
    }
  }
}

在这种特定情况下，处理代码为http://labfiftyfive.com/res/mathsbaby2.pde，页面上的JS将其触发为http://labfiftyfive.com/js/main.js第162行及以上。