javascript - 使用 jQuery 制作窗口动画

Question

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

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

当用户单击链接时，我需要窗口为该 div 制作动画，类似于此网站:

http://shahkaarshah.com/

我该怎么做？

Answer 1

您链接到的网站是使用 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 在视口(viewport)周围设置动画:

$('.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