當另一個元素被刪除時停止浮動的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從捕捉

回答

相關問題