object - 使用（可能）处理.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 行等。