0

私は自分の写真のウェブポートフォリオを作り始めました。私はウェブデザイナーではありません。興味があるだけです。これがページです：jsfiddleのhttp://jsfiddle.net/RhjJZ/1/ 。<a>リンクの背景を作成するためにCSSスプライトを作成しました。マウスがそれらの上にあるときにそれらを変更したいので、jQueryを使用してそのスクリプトを作成しましたが、機能しているようです。理由は想像できません。さまざまな方法で試してみました...インターネットですが、彼らは私を助けることができませんでした。誰かが私が間違ったことを指摘してくれたら、私はとてもうれしいです！メニューの私の写真は1x296ピクセルのものです。

4

1 に答える 1

0

問題はmenu()、jQueryが原因で関数が通常のスコープにないため、Javascriptエラーが発生することですmenu(xx) is not a function。

data-解決策は、プレフィックス属性スキームを使用してこれらのハードコードされた値を設定し、jQueryでmouseoverおよびイベントを処理することです。mouseout

HTML：

<body>
    <header id="menu">
            <h1>dawe's portfolio</h1>

        <nav>   <a id="m_portf" data-one="0" data-two="-37" href="#portfolio"
            width="1px">portfolio</a>
    <a id="m_music" data-one="-72" data-two="-111"
            href="#music">music</a>
    <a id="m_about" data-one="-148" data-two="-185"
            href="#about">about</a>
    <a id="m_contact" data-one="-222" data-two="-259"
            href="#contact">contact</a>

        </nav>
    </header>
</body>

Javascript：

$('a').on('mouseover',function(){
    $(this).animate({'background-position': '0px ' +$(this).attr('data-one')+'px';}, 1500);
});

$('a').on('mouseout',function(){
    $(this).animate({'background-position': '0px ' +$(this).attr('data-two')+'px';}, 1500);
});
于 2013-02-28T18:24:31.977 に答える