2

最近の Web テンプレートで見た効果を再現したい (ここにリンクがあります)。このテンプレートでは、メニューバーのリンクをクリックすると、コンテンツの背景位置が変化して表示されます。これらの種類のテンプレートを実行するためのフレームワークはありますか? そして、彼らはどのようにそれを行いますか、参考文献はありますか?

ご協力いただきありがとうございます。

4

2 に答える 2

1

2 番目の質問に答えるには、どのように行うのですか??

クロムでメニュー要素のいずれかを調べると、「li」要素で異なる css を持つ 2 つの「div」を使用していることがわかります。マウスを動かすと、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;
}

それが役に立てば幸い ！

于 2013-03-31T17:40:35.290 に答える
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');
于 2013-03-31T17:30:43.140 に答える