悬停时 JQuery Center 溢出 DIV

Question

我正在尝试复制(在 JQuery/CSS 中)this flash site's鼠标悬停时居中的 float 溢出框。

有人能指出我正确的方向吗？这是我到目前为止的代码，我已经完成了一些非常简单和错误的 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 );
    });
});

Answer 1

悬停时它们不是“居中”的， float 框容器移动的方向与鼠标相反(尝试在窗口的任何部分水平移动鼠标)。因此，例如，如果鼠标向右移动 10px，则容器向左移动 -10px。

这两个值之间的关系将基于屏幕尺寸和容器溢出尺寸。假设你的屏幕宽度是 960px，溢出是 480px，那么鼠标每移动 1px 应该移动包含半个像素

这些应该有帮助: http://docs.jquery.com/Tutorials:Mouse_Position#How_do_I_find_the_mouse_position.3F http://api.jquery.com/mousemove/

(假设你想复制效果，而不是在悬停时将元素居中。如果你是后者，你仍然需要捕获 mouseposition )