Javascript 如何使用移动内容块创建基于CSS的动态界面？

我正在试图找出最好的方法是建立一个网站界面，它有一个大的中间“瓷砖”（基本上是一个带有圆角的div，一个可变的背景图像，上面有文本），作为界面的中心，周围有一些小的瓷砖，可以点击作为链接，例如，一块瓷砖将通向照片库等。。。然而，我需要这些较小的瓷砖是可移动的，也就是说，我希望在下一组瓷砖进入屏幕之前，它们能明显地从屏幕上拂去（以特定的方向）

（理想情况下，它们将是同一组瓷砖，它们只需离开屏幕以“改变”原来的状态，然后作为新的瓷砖集返回-一个理想的例子是单击照片库瓷砖，所有主瓷砖将离开屏幕，被更多代表画廊中单个照片的瓷砖所取代）

我没有问题的CSS圆角和定位我的瓷砖等。。。但我目前正在尝试使用此处引用的代码使瓷砖实际移动：

我不能让它工作。我已经设置了一个测试块，当它在div上检测到鼠标悬停事件时，使用上面引用的代码只对另一个测试块的宽度进行一次更改，但它似乎不起作用

这是我的代码，如果您能发现任何错误，但首先我也想听听您是否有更好的建议，以达到我正在寻找的设计状态：

var style;
function changeFoo() {
if(typeof style == 'undefined') {
    var append = true;
    style = document.createElement('style');
}
else {
    while (style.hasChildNodes()) {
        style.removeChild(style.firstChild);
    }
}
var head = document.getElementsByTagName('head')[0];
var rules = document.createTextNode(
    '.tiletest2 { border:4px solid #999; background-color:#999; width: 50px; border-radius:32px; }'
);

style.type = 'text/css';
if(style.styleSheet) {
    style.styleSheet.cssText = rules.nodeValue;
} else {
    style.appendChild(rules);
}
if(append === true) head.appendChild(style);
}

onmouseover事件如下所示：

<div class="tiletest1" onmouseover="changeFoo()">
<br/><br/>
SAMPLE left
<br/><br/>

剩余样本

---

尝试使用类似的JavaScript库。您还可以获得类似于您所描述的各种效果的插件。

我同意TimS使用jquery，特别是您需要使用该功能

这将使您自己更加轻松，因为您可以轻松控制动画播放的速度和时间，并且可以使用.hide（）函数轻松删除div，这为您提供了许多选项，可以使用哪种类型的动画来关闭它