0

嗨，我正在尝试创建一个单页网站，其中包含多个与窗口大小相同的 div。该网站将有一个菜单来引用页面上的每个 div。我想要做的是在用户为窗口设置动画时单击指向其对应 div 的菜单链接之一。

http://www.nistoralexandru.comule.com/div.jpg

当用户单击链接时，我需要将窗口设置为类似于该站点的 div 动画：

http://shahkaarshah.com/

我怎样才能做到这一点？

4

2 回答 2

2

你可能是指手风琴之类的东西？ http://jqueryui.com/demos/accordion/

jquery 有许多易于使用的手风琴插件，因此它们可能比从头开始编码更容易用于复杂的动画。

根据您添加的信息，也许像这样的网格手风琴？ http://css-tricks.com/examples/InfoGrid/

于 2012-08-10T17:33:46.693 回答
2

您要链接到的站点是用 Flash 构建的，使用 javascript 复制不同页面元素的动画应该不难，但确实没有快速的“一刀切”功能来做到这一点。

这是一个通常如何完成的快速示例：

构建某种 HTML 结构：

​<div id="site">
    <div id="main" class="page">
        <ul>
            <li><a href="#page1">Page 1</a></li>
            <li><a href="#page2">Page 2</a></li>
            <li><a href="#page3">Page 3</a></li>            
            <li><a href="#page4">Page 4</a></li>
            <li><a href="#page5">Page 5</a></li>
        </ul>
    </div>
    <div id="page1" class="page"><a href="#main">Back</a></div>
    <div id="page2" class="page"><a href="#main">Back</a></div>
    <div id="page3" class="page"><a href="#main">Back</a></div>
    <div id="page4" class="page"><a href="#main">Back</a></div>
    <div id="page5" class="page"><a href="#main">Back</a></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

并使用一点 javascript 在视口周围对其进行动画处理：

$('.page a').on('click', function(e) {
    e.preventDefault();
    var href = $(this).attr('href'),
        top = $(href).css('top'),
        left = $(href).css('left');
    $("#site").animate({top: '-'+top, left: '-'+left}, 1000);
});

这是一个小提琴

于 2012-08-10T18:00:34.110 回答