1

私は、マウスが上にあるときに中央に配置されるこのフラッシュサイトのフローティングオーバーフローボックスを（でJQuery/CSS）複製しようとしています。

誰かが私を正しい方向に向けることができますか？これは私がこれまでに持っているコードです。私はいくつかの非常に単純で間違ったコードを実行しましたが、ホバーに集中JQueryする方法がわかりません。divs

HTML

<div id="header">
    <div id="menu">[NAV]</div>
    <div id="ContentPane" runat="server"></div>
</div>
<div id="front-floating-panes">
    <div class="front-floating-pane scroll-1" id="FloatingPane" runat="server">
        <p>Pane 1</p>
    </div>
    <div class="front-floating-pane scroll-2" id="FloatingPane2" runat="server">
        <p>Pane 2</p>
    </div>
    <div class="front-floating-pane scroll-3" id="FloatingPane3" runat="server">
        <p>Pane 3</p>
    </div>
    <div class="front-floating-pane scroll-4" id="FloatingPane4" runat="server">
        <p>Pane 4</p>
    </div>
    <div class="front-floating-pane scroll-5" id="FloatingPane5" runat="server">
        <p>Pane 5</p>
    </div>
    <div class="front-floating-pane scroll-6" id="FloatingPane6" runat="server">
        <p>Pane 6</p>
    </div>
</div>

CSS

#front-floating-panes{position:fixed; width:100%; margin: 25px 0 25px 25px; overflow:hidden;  white-space: nowrap; }
.front-floating-pane{border:1px solid; display:inline-block; width:350px; height:300px; margin: 0 10px 0 0; background-color:#29F;  }
.front-floating-pane p{ background-color:#F60;}

JQUERY

<script type="text/javascript">
$(document).ready(function() {
    $(".scroll-1").hover(
    function() {
        $("#front-floating-panes").stop().animate({ left : "-20"}, 200 );
    },
    function(){
        $("#front-floating-panes").stop().animate({ left : "0"}, 200 );
    });

    $(".scroll-2").hover(
    function() {
        $("#front-floating-panes").stop().animate({ left : "-150"}, 200 );
    },
    function(){
        $("#front-floating-panes").stop().animate({ left : "0"}, 200 );
    });

    $(".scroll-3").hover(
    function() {
        $("#front-floating-panes").stop().animate({ left : "-200"}, 200 );
    },
    function(){
        $("#front-floating-panes").stop().animate({ left : "0"}, 200 );
    });

    $(".scroll-4").hover(
    function() {
        $("#front-floating-panes").stop().animate({ left : "-250"}, 200 );
    },
    function(){
        $("#front-floating-panes").stop().animate({ left : "0"}, 200 );
    });

    $(".scroll-5").hover(
    function() {
        $("#front-floating-panes").stop().animate({ left : "-300"}, 200 );
    },
    function(){
        $("#front-floating-panes").stop().animate({ left : "0"}, 200 );
    });

    $(".scroll-6").hover(
    function() {
        $("#front-floating-panes").stop().animate({ left : "-340"}, 200 );
    },
    function(){
        $("#front-floating-panes").stop().animate({ left : "0"}, 200 );
    });
});

4

1 に答える 1

0

ホバー時に「中心」になるわけではありません。フローティング ボックス コンテナーは、マウスとは反対の方向に移動します (ウィンドウの任意の部分でマウスを水平に移動してみてください)。たとえば、マウスが右に 10 ピクセル移動すると、コンテナーは左に -10 ピクセル移動します。

2 つの値の関係は、画面サイズとコンテナー サイズのオーバーフローに基づきます。画面の幅が 960px で、オーバーフローが 480px の場合、マウスを 1px 動かすごとに半分のピクセルが含まれている必要があります。

これらが役立つはずです： http://docs.jquery.com/Tutorials:Mouse_Position#How_do_I_find_the_mouse_position.3F http://api.jquery.com/mousemove/

（ホバー時に要素を中央に配置するのではなく、効果を複製したいと仮定します。後者の場合は、 mouseposition を取得する必要があります）

于 2013-03-14T14:43:21.137 に答える