javascript - html里动画

Question

我想复制我在最近的网页模板中看到的效果（这里是链接）。在此模板中，当您单击菜单栏上的链接时，它的内容会出现在某种背景位置变化中。有没有什么框架可以做这些模板？他们是怎么做的，有什么参考吗？

非常感谢您的帮助。

Answer 1

我认为他们使用这个插件：

http://keith-wood.name/backgroundPos.html

查看他们页面的来源可以发现：

include('js/jquery.easing.js');
include('js/jquery.backgroundpos.min.js');
include('js/superfish.js');
include('js/switcher.js');
include('js/forms.js');
include('js/googleMap.js');
include('js/jquery.mousewheel.js');
include('js/uScroll.js');
include('js/jquery.color.js');
include('js/jquery.cycle.all.min.js');
include("js/preloadIMG.js");
include('js/MathUtils.js');
include('js/jquery.transform-0.9.3.min.js');
include('js/bg.js');

Answer 2

回答你的第二个问题他们是如何做到的？

在 chrome 中，如果您检查任何菜单元素，您将看到它们在“li”元素中使用了两个“div”，它们具有不同的 css，当您移动鼠标时，它们会更改 div 的位置（顶部属性在样式）。我有这个小提琴中行为的示例实现。虽然我不确定他们使用的是哪个插件。我会试着找出来

http://jsfiddle.net/CQs7Q/1/

的HTML

<ul>
    <li>
        <div class="first">Settings</div>
        <div class="second">Settings</div>
    </li>
</ul>

Javascript

$(function() {
    $("li div.first").mouseover(function() {
        $(this).animate({"top":-20})
        $(this).next(".second").animate({"top":-20})
        //$(this).css("top","-20px").next(".second").css("top","-20px");
    })
    $("li div.second").mouseout(function() {
        $(this).animate({"top":0})
        $(this).prev(".first").animate({"top":0})

    })
})

CSS

ul {
    width:100%;
    background-color:black;
    color:white;
    list-style:none;
    height:20px;
}

ul li {
    display:inline-block;
    width:100px;
    height:20px;
    overflow:hidden;
    position:relative;
}
ul li div {
    position:relative;
    height:20px;
}
ul li div.first {
    background-color:red;
    color:white;
}

希望能帮助到你 ！