動態添加HTML動畫定位

基本上，我有一個文件，「thedot」。我的PHP腳本從這個文件讀取並將它分成3個部分，稱爲點。然後它將這些點呈現在頁面中，三行，用CSS格式化並填充文件中的內容。

到目前爲止還不夠容易。但是，這些點是奇怪的動畫。他們通常是黑色的，你看不到他們的內容。當你將鼠標懸停在它們上面時，它們會展開，然後改變顏色以便可以。我的問題是，當我將它們渲染出來時，將其懸停在每一個上會導致所有其他人移動。

我試過了： a）使用位置：固定在點上並使用PHP爲它們指定特定的位置。自從他們盤旋在他們身上後，這種方式並不奏效，這讓他們從左上角擴展，當我需要他們從中心擴展時。 b）爲每一行使用單獨的表格。這仍然推動其餘的下降。 c）使用自動頁邊距。這沒有效果。在tuxnet.co.uk/dots/browse

直播網站（看猙獰）的預期效果（只有一個，而不是他們的列）

例子：tuxnet.co.uk/dots/dot?dot = 18668

乾杯，

弗雷迪。

P.S.當將鼠標懸停在一行中的點上時，如果該行的其他兩個成員水平移動（如單行示例中的情況），則可以。

來源

2013-07-08 Freddy Tuxworth

每一行的高度擬合到最高的元素的大小，因此該行將不得不增加其高度當圓膨脹，從而導致所有的行移動。您是否嘗試增加行的高度以適應放大的圓圈，以便在圓圈展開後行不需要展開？ –

@Freddy Tuxworth我不是很確定，但你可能需要用DIV標記替換TABLE，因爲所有的列（TD的每行）都會因爲任何TD的內容變大而擴大 – Yogesh

我不確定這個答案是否有意義，但我會採取擺動。

我會嘗試在<td>標籤上使用position:relative。然後在子點上使用position:absolute。

position:absolute允許元素根據下一個父元素或<html>定位自己，如果它找不到該性質的任何父項。因爲你會使用position:absolute，你不應該遇到元素被其他元素「推動」的問題;但是，您可能遇到一些重疊問題（可以使用z-index輕鬆解決）。

我希望有幫助！

編輯：我擺弄你的css文件鏈接到你的演示頁面。讓我知道這是你在找什麼。所做的唯一變化是在td和.dot

td { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    position:relative; 
    height:70px; 
    width:70px; 
    margin:0; 
    padding:0; 
} 
.dot { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
    font-family: "courier new"; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    background-color: #000000; 
    color: #000000; 
    width: 70px; 
    height: 70px; 
    max-width: 70px; 
    max-height: 70px; 
    border-radius: 50%; 
    overflow: hidden; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
      transition: all 0.3s; 
} 

.dot:hover { 
    width: 140px; 
    height: 140px; 
    max-width: 140px; 
    max-height: 140px; 
    top:-35px; 
    left:-35px; 
    z-index:1; 
} 

.one:hover { 
    background-color: #AA11FF; 
} 
.two:hover { 
    background-color: #11AAFF; 
} 
.three:hover { 
    background-color: #FFAA11; 
} 
.onedex { 
    background-color: #AA11FF; 
} 
.twodex { 
    background-color: #11AAFF; 
} 
.threedex { 
    background-color: #FFAA11; 
} 

.footer { 
font-size: 10; 
font-family: 'courier new'; 
position: fixed; 
bottom: 15px; 
width: 100px; 
left: 50%; 
margin: 0 0 0 -50px; 
text-align: center; 
} 

.header { 
font-size: 30; 
font-family: 'courier new'; 
position: fixed; 
top: 25%; 
width: 50%; 
left: 50%; 
margin: 0 0 0 -25%; 
text-align: center; 
} 
.sharer { 
font-size: 20; 
font-family: 'courier new'; 
position: fixed; 
bottom: 25%; 
width: 50%; 
left: 50%; 
margin: 0 0 0 -25%; 
text-align: center; 
} 

input[type=text] { 
    width: 150px; 
    height: 30px; 
    border: none; 
    font-family: "courier new"; 
    font-size: 20px; 
    border-bottom: 1px solid #000; 
    text-align: center; 
    outline: none; 
} 

input[type=submit] { 
    width: 100px; 
    height: 30px; 
    background-color: #FFFFFF; 
    color: #000000; 
    font-family: "courier new"; 
    font-size: 20px; 
    border: 1px solid #000; 
    text-align: center; 
    outline: none; 
} 

input[type=submit]:hover { 
    border: 1px solid #11AAFF; 
    color: #11AAFF; 
} 

.dotstatic { 
    font-family: "courier new"; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    color: #000000; 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
} 

.error { 
    height: 20px; 
    font-size: 15px; 
    font-family: "courier new"; 
    color: #E01B1B; 
} 

.divider { 
    height: 1px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    width: 150px; 
    opacity: 0.7; 
    background-color: grey; 
}

來源

2013-07-08 17:43:27 Jason

另外請注意，css轉換是不受IE版本9及更早版本的支持。如果您試圖使這個網頁跨瀏覽器工作，您可能需要考慮使用JQuery來幫助懸停動畫。 – Jason

對不起！我只是意識到這個答案已經出現，我會檢查一下。 –

太棒了！這真的很好！現在我只需要弄清楚如何停止重疊，但應該有一點保證金。乾杯! –

這不完全按照您的要求工作，但在Dot上懸停不會改變其他行的點。您需要根據您的期望進行更多更改才能工作。

<div><!-- first Row --> 
<div class="dot one" style="margin: auto;">test</div> 
<div class="dot two" style="margin: auto;">test</div> 
<div class="dot three" style="margin: auto;">test</div> 
</div> 
<div><!-- second Row --> 
<div class="dot one" style="margin: auto;">test</div> 
<div class="dot two" style="margin: auto;">test</div> 
<div class="dot three" style="margin: auto;">test</div> 
</div>

來源

2013-07-08 17:43:22 Yogesh

動態添加HTML動畫定位

回答

相關問題