当另一个元素被删除时停止浮动的div从捕捉

我是很 JavaScript的新来的，所以如果这是一个愚蠢的问题道歉。当另一个元素被删除时停止浮动的div从捕捉

我想制作滚动式滚动样式的元素。我查找了Mootools并使用它的FX.Transitions我可以让Div元素很好地滑动。

它的工作原理是在屏幕上居中放置一个宽度为710px的div，我将其称为视口。在这个div里面是另外一个，更宽一些，子div全部浮在左边。当用户点击下一个按钮时，我将css left属性设置为-710px用于当前查看的项目和下一个按钮，使用mootools很好地滑动它们。所以：

左侧位置：隐形，老滑哪个用户已经看了看旁边点击
中心位置：什么是显示在屏幕上的那一刻
正确的位置：对于看不见的，下一张幻灯片用户

用户看到旧元素滑出，并且新元素滑入。所有这些都很好。

但是，在下一次单击时，我想要删除用户已经看过的旧幻灯片（但此时不可见）。我查了一下如何在JavaScript中做到这一点，并且工作正常。但是当我删除它的时候，当前的中心元素会向左移动（而不是滑动），因为它得到了left: -710px以将它带到中心，并且有float: left！

我可以通过在删除后设置left: 0px来解决这个问题，这会将它放回它所属的中心，但我担心在慢速浏览器上，用户会看到元素闪烁到左侧，然后重新出现，我正确的。

我希望这是有道理的 - 如果没有，我可以上传代码的地方。

有没有一种方法可以删除旧的，最左边的元素，并防止其他元素移动？比如说，我可以告诉浏览器“请不要重新绘制一会儿，请”一种方式？或者我问一个愚蠢的问题，删除和修正之间的时间过快，用户无法注意到闪烁？或者有更聪明的方式来布置元素？

谢谢！

编辑：这个例子在这里：jsfiddle.net/Az5Lg

来源

2011-01-24 Frederik

转到www.jsfiddle.net和2-3幻灯片创建一个例子，我很乐意去看看呢。在js位发布只有js，在html和css顶部发布html，你可以嵌入外部CSS等，但图像需要一个完全合格的域名。 – 2011-01-24 13:44:16

嗨Dimitar，我刚刚添加了一个链接到原来的帖子 - 欢呼 – Frederik 2011-01-24 15:41:30

一般来说，如果你正在做的，同时作为元素去除的位置变化（即两个语句之间没有计算和其他代码），那么尽管你可以随时测试以发现问题，但我预计它会变得太快而无法察觉。

如果你确实想避免这种情况，你将不得不做某种渐变。我不知道mootools在动画方面做了什么（http://mootools.net/docs/core/Fx/Fx.Tween看起来像你想要的，但我不使用mootools - 我假设你正在使用这个或类似于你的动画片已经尽管），但如果你可以让它动画的div的宽度被删除为0，而不是滑动整个很多（所以左仍然是0，但当你减小当前可见元素的大小新一个滑入视图）。

你必须确保你正确地完成了“幻灯片”的溢出，以确保内容不会被挤压，并且在它消失时出现错误，但这应该是有效的（如果可以的话，使用mootools想象它会是）。

那么当然，一旦它是一个零宽度元素，您应该可以删除它，而不会影响页面外观。

编辑添加宽度的过渡workign例如：

http://jsfiddle.net/A7YaW/是基于你一些不同操作的链接页面上的jsfiddle。代码与您的代码尽可能相似，以确保您可以看到它在做什么。

我所做的关键事情是创建一个已经在屏幕左侧的Welcome0框。我将这个宽度滑动到0，这反过来导致所有其他飘起来的盒子随着它一起向上滑动。一旦箱子宽度为0，我们可以在下一个过渡中毫不费力地将其删除。

跳跃的原因与您的定位有关。大致与你的定位有关。你正在相对定位事物，这意味着它们的位置与预期的标准位置相关。当你消除元素时，你正在搞这个基本位置，从而以一种让我有点困惑的方式来摆弄东西。

使用宽度转换的优点是它只改变一个元素并且更简单。你也可以在转换完成的瞬间取出元素（我没有考虑如何在转换完成时做什么），这似乎更适合在下一次迭代中删除它。

编辑与原因，原来是不工作

由于这是窃听我，我不知道原因，原来是跳我坐下来，制定了全部事情的解释，因为我想做了我认为我可以分享。而且因为它最简单的我包含了ascii艺术图表来展示这个例子中的各个幻灯片如何移动。希望这一切都有道理。 :)关键是要做position: relative的工作方式，所以如果需要的话先查看。 :)

----------------------------------------- 
    | Pos A | Pos B | Pos C | Pos D | Pos E | 
    ----------------------------------------- 
-710  0  710  1420

在上面的Pos B是您可见的视口。

当您第一次查看该页面时，您的四张幻灯片（1到4）分别位于B，C，D和E位置。

当您第一次转换时，您将前两张幻灯片的左侧位置设置为-710。这让他们（只有他们）向左移动了很多。现在

你的幻灯片中的位置：

1 = A 
2 = B 
3 = D 
4 = E

上，当你删除你做的第一件事就是删除幻灯片1.此时页面的“自然”布局下次运行（即在任何重新定位样式之前）在幻灯片2到4的位置B到D.然而，幻灯片2已经定位在-710px的位置上，相对立即移动到位置A，而3和4保持在位置C和D.然后，您将过渡效果应用到幻灯片2和3.它对幻灯片2没有影响（因为它已经具有该样式），幻灯片3按预期顺滑滑入视图。然后它重复...

所以用图表

Start: 
    ---------------------------------------------- 
    |  | Slide1 | Slide2 | Slide3 | Slide4 | 
    ---------------------------------------------- 

Click 1 - After transition 
    ---------------------------------------------- 
    | slide1 | Slide2 |  | Slide3 | Slide4 | 
    ---------------------------------------------- 


Click 2 - After delete 
    ---------------------------------------------- 
    | slide2 |  | Slide3 | Slide4 |  | 
    ---------------------------------------------- 

Click 2 - After transition 
    ---------------------------------------------- 
    | slide2 | Slide3 |  | Slide4 |  | 
    ---------------------------------------------- 


Click 3 - After Delete 
    ---------------------------------------------- 
    | slide3 |  | Slide4 |  |  | 
    ---------------------------------------------- 

Click 3 - After transition 
    ---------------------------------------------- 
    | slide3 | Slide4 |  |  |  | 
    ----------------------------------------------

来源

2011-01-24 13:35:57 Chris

当另一个元素被删除时停止浮动的div从捕捉

回答

相关问题