1

我正在尝试复制（在JQuery/CSS）此 Flash 站点的浮动溢出框，该框在鼠标悬停时居中。

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

查询

<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

它们不是在悬停时“居中”，浮动框容器的移动方向与鼠标相反（尝试在窗口的任何部分水平移动鼠标）。因此，例如，如果鼠标向右移动 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 ）

于 2013-03-14T14:43:21.137 回答