動畫布局

Question

我想創建一個頁面，其中佈局改變而不是加載新頁面。這個想法是讓用戶點擊一個項目，然後重新排列頁面上的所有項目。我可以弄清楚如何做到這一點，但我無法弄清楚的是如何爲每個頁面創建鏈接。

所以，如果用戶點擊項目A並獲得佈局A我想有一個鏈接。

如果用戶點擊物品B並獲得佈局B，我想爲其創建鏈接。

任何想法？

Answer 1

如果你使用的是jQuery，你可以使用任何你喜歡的元素作爲鏈接/按鈕或其他。

jQuery的可以讓我們附上各種各樣的事件偵聽器通過用戶交互觸發的事件 -

• 鼠標點擊
• 雙cicks
• 鍵盤鍵關閉/打開
• 等...

這些操作可以附加到HTML中的任何元素。它可能是 -

• 的<a>標籤
• 的<img>標籤
• 一個<td>或<tr>在表結構
• 通用<div>元素
• 等...

您可以將點擊甚至綁定到您需要的任何元素上並觸發你的changeLayout()函數（或類似的東西）。一個簡單的（單）的語法單擊處理程序是這樣的 -

$("#elementSelector").on('click',function(){ 
    // user has clicked the element! 
    // do some cool animations and stuff! 
}); 

該函數將被觸發用於與id等於elementSelector任何元素的屬性。

適合的描述要素的一些例子 -

• <div id="elementSelector"></div>
• <a href="#" id="elementSelector"></a>
• <td id="elementSelector"></td>

Answer 2

你可以在你的HTML的身體改變類。這將允許您根據佈局使用CSS的不同部分。每條鏈路可以設置使用jQuery類：

// In your javascript (within jQuery ready function) 
$('#layoutTwoOne').click(function(event) { 
    $('body').removeClass('layoutTwo').addClass('layoutOne'); 
}); 
$('#layoutTwoLink').click(function(event) { 
    $('body').removeClass('layoutOne').addClass('layoutTwo'); 
}); 

在HTML：

<a href="#" id="layoutOneLink">Switch to Layout One</a> 
<a href="#" id="layoutTwoLink">Switch to Layout Two</a> 

在你的CSS：

body.layoutOne { 
    background-color: black; 
} 
body.layoutTwo { 
    background-color: white; 
} 
body.layoutOne div { 
    /* Some special css for all divs in layout one */ 
} 

的代碼可能是更多的數據驅動的。這有點破解，但它會做你需要的。 :)