Hover上的JQuery中心Ooverflow

Question

我正在尝试复制(在JQuery/CSS中)当鼠标结束时中心的这个闪存站点浮动溢出框。

有人能给我指明正确的方向吗？这是我到目前为止的代码，我做了一些非常简单和错误的JQuery代码，但我只是不知道如何将我的divs集中在悬停上。

<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

并不是它们在悬停时“中心”移动，浮动盒容器与鼠标向相反的方向移动(试着在窗口的任何部分水平移动鼠标)。例如，如果鼠标向右移动10 So，容器就向左移动-10 So。

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

这些应该会有所帮助：position.3F http://api.jquery.com/mousemove/

(假设您希望复制此效果，而不是在悬停时对元素进行居中。如果你想要的是后者，你还需要抓住鼠标)