0

この質問に対する答えが見つからないようだったので、質問しようと思いました。私は最初の Web サイトを作成しています。マウスがその上に置かれたときに、個々のナビゲーション要素を上にスライドさせるために Javascript を少し使用しています。その後、マウスアウトすると、スライドして戻ります。

「上」が下にスライドする前にマウスが「上」要素から「下」要素に移動する場合を除いて、正常に動作しています。下。新しいマウスオーバー イベントが以前のものと混同されていると思いますが、修正方法がわかりません。

それが私の問題を説明していることを願っています.これが私が取り組んでいるコードです(CSSはナビゲーションタブごとに相対的な位置であるため、表示しませんでした):

Javascript:

var cartridges, obj, lastObj;
var velocity = 2;

function setUp() {
    if (!document.getElementById) return;
        cartridges = document.getElementsByClassName('navigation');
    for (var i = 0; i < cartridges.length; i++) {
        cartridges[i].onmouseover = slideUp;
        cartridges[i].onmouseout = slideDown;
   }
}

function slideUp(e) {
    if (!e) var e = window.event;
    obj = (e.target) ? e.target: e.srcElement;
    var up = obj.style.top;
    up = up.substring(0, up.length - 2);
    parseInt(up);

    function frame() { 
        up -= velocity; // update parameters     
        obj.style.top = up + "px"; // show frame
        if (up <= -100)  // check finish condition (negative because that pushes it up, otherwise it would go down
            clearInterval(id);
    }
    var id = setInterval(frame, 10); // draw every 10ms 
}

function slideDown() {
    var up = obj.style.top;
    up = up.substring(0, up.length - 2);
    parseInt(up);

    function frame() { 
        up++;  // update parameters 
        obj.style.top = up + "px";
        if (up >= 0)  // check finish condition (negative because that pushes it up, otherwise it would go down
            clearInterval(id);
    }
    var id = setInterval(frame, 10); // draw every 10ms 
}

window.onload = setUp;

HTML:

<div id="navigation">
            <ul>
                <li><a  class="navigation" href="index.html" ><img id="home" alt="Home" src="../images/cartridge_grey_index.png" /></a></li>
                <li><a  class="navigation" href="aboutme.html"><img id="aboutme" alt="About Me" src="../images/cartridge_grey_aboutme.png" /></a></li>
                <li><a  class="navigation" href="resume.html"><img id="resume" alt="resume" src="../images/cartridge_grey_resume.png" /></a></li>
                <li><a  class="navigation" href="projects.html"><img id="projects" alt="projects" src="../images/cartridge_grey_projects.png" /></a></li>
                <li><a  class="navigation" href="blog.html"><img id="blog" alt="blog" src="../images/cartridge_grey_blog.png" /></a></li>
                <li><a  class="navigation" href="contact.html"><img id="contact" alt="contact" src="../images/cartridge_grey_contact.png" /></a></li>
            </ul>
        </div>
4

2 に答える 2

0

何かのようなもの

.navigation:hover { margin-top: 2; }

あなたが必要とするすべてかもしれません。

次に、追加できます

transition-property: margin-top;
transition-duration: 1s;

少し余分な目の保養のために。

もちろん、プロジェクトに 80K のライブラリを追加してから、マウスオーバー イベントを処理するためのコードを大量に記述したり、CSS の 1 行で同じことを実行できるとしても、jQuery を使用すると次のように感じるかもしれません。 、ご存知のように、本物のプログラマーです。

于 2013-01-26T03:00:01.753 に答える
0

Web に不慣れで、特に Javascript の世界に不慣れな場合は、jQuery や MooTools などのライブラリを使用してスライド メニューを実現することを強くお勧めします。すでに多くのプラグインが利用可能です。または、学習プロセスを実行したい場合は、自分で簡単に接続できます。

jQuery には .mouseover() や .slideUp() などの便利なメソッドが用意されているため、このタスクはほとんど簡単です。また、フェードや表示/非表示などの他の効果のリストから選択することもできます。追加のボーナスとして、すべてのブラウザー間での互換性も得られます。

詳細については、http: //api.jquery.comをご覧ください。

于 2013-01-26T03:09:37.390 に答える