Question

我正在试图找出建立一个网站界面的最佳方法，该界面有一个大的中心“瓷砖”（基本上是带有圆角的div，可变背景图像和文本）作为界面的枢纽，我周围有较小的瓷砖，可以作为链接点击，例如一个瓷砖将导致照片库等...但是我需要这些较小的瓷砖是可移动的，即我希望它们在下一组瓷砖进入屏幕之前明显地离开屏幕（在特定方向上）。 / p>

（理想情况下，它们将是同一组瓷砖，它们会简单地从屏幕上“改变”，然后作为新的瓷砖组回来 - 一个理想的例子就是点击照片库瓷砖，所有主要的瓷砖都在屏幕外扫过，用更多代表画廊中各个照片的瓷砖代替）

我对圆角的CSS和定位我的瓷砖等没有任何问题...但我现在正试图使用此处引用的代码实际移动瓷砖：Alter CSS class attributes with javascript?

我无法让它发挥作用。我设置了一个测试图块，当它在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/>

Answer 1

尝试使用像http://jquery.com/这样的JavaScript库。您还可以获取http://jqueryui.com/等插件，了解您所描述的各种效果。

Answer 2

我同意TimS使用jquery，特别是你会想要使用.animate()函数。

这样可以让你自己更容易，因为你可以轻松控制动画播放的速度和时间，你可以使用.hide（）函数轻松删除div。这为你提供了很多选择你可以用来关闭它的动画。

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

2 个答案: