0

ウェブサイトの左側と右側にある「前へ」と「次へ」の矢印で制御したいフルスクリーンの背景画像があります。

html

<nav id="pagination">
    <a id="prev" href="#"></a>
    <a id="next" href="#"></a>
</nav>

css（scss）

#pagination {   
    display:none;
    position:relative;
    z-index:1;

    a { 
        display:block;
        position:fixed;
        top:45%;
        width:100px;
        height:100px;

        &#next {
            right:20px;
        }

        &#prev {
            left:20px;
        }
    }
}

だから、これは私が欲しいものを正確に与えてくれます。前の画像リンクがページの左側に垂直方向に中央揃えされ、次の画像リンクがページの右側に垂直方向に中央揃えされています。

このナビゲーションをfadeIn（）およびfadeOut（）するための次のJS（jquery）があります…</ p> 

var c, p = $('#pagination');
$(document).on('mousemove',function() {
        p.fadeIn('fast');
        clearTimeout(c);
        c = setTimeout(function() {
            p.fadeOut('fast');
        }, 1000);
    });

これは問題なく機能しますが、#pagination現在ページ付けリンクを使用している場合は、fadeOut（）も機能します。リンク自体をこの動作から除外することは可能ですか？私の説明があまり奇妙ではないことを願っています。繰り返しますが、現在、私のページネーションは有名なビデオプレーヤーのように機能します。マウスを動かさない場合、ページネーションはフェードアウトします。マウスを動かすと、ページネーションは再びフェードインします。

しかし、現在2つのリンク（#prevまたは#next）のいずれかを使用していて、マウスを動かさない場合、「＃pagination」もフェードアウトします。私はそれが起こらないようにしたい。したがって、マウスが2つのページ付けリンクにカーソルを合わせているときに、ページ付けがフェードアウトしないようにする必要があります。

それについて何かアイデアはありますか？

4

1 に答える 1

0

これを試して。

 var c;
 $('#pagination').('mousemove',function() {
    $(this).fadeIn('fast');
    clearTimeout(c);
    c = setTimeout(function() {
        p.fadeOut('fast');
    }, 1000);
});
于 2012-08-08T07:21:09.047 に答える