Question

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

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

当用户点击某个链接时，我需要使用该窗口来设置与此网站类似的div：

http://shahkaarshah.com/

我该怎么做？

Answer 1

你可能会说像手风琴这样的东西？ http://jqueryui.com/demos/accordion/

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

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

Answer 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);
});

这是FIDDLE

使用jQuery动画窗口

2 个答案: