动画布局

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 */ 
} 

的代码可能是更多的数据驱动的。这有点破解，但它会做你需要的。 :)