在 jquery 中使用数学来隐藏/显示动画背景

Posted 2023-05-08

【中文标题】在 jquery 中使用数学来隐藏/显示动画背景

【英文标题】：Using mathematics in jquery to hide/show backgrounds with animation

【发布时间】：2011-06-11 15:10:54

【问题描述】：

晚上好，我累了，已经为此奋斗了好几个小时。我正在使用我找到的样本并根据我的需要对其进行更改。它使用 jquery.bgpos.js 创建一个滑动背景，当鼠标经过另一层（导航）时，该背景会发生变化。它在页面中使用定位和一些内联样式，我无法正确匹配。

我的示例显示为here。当您将鼠标悬停在文本选项卡上时，背景会发生变化，但不会正确定位，因为，好吧，我把它搞砸了。我讨厌在这里发布所有这些代码，但我的时间不多了，只能寻找更了解的人来纠正我的错误。谢谢。

这是带有背景的菜单的 html：

<div id="menuWrapper" class="menuWrapper bg1">
                <ul class="menu" id="menu">
                    <li class="bg1" style="background-position:0 0;">
                        <a id="bg1" href="#">Home</a>
                        <ul class="sub1" style="background-position:0 0;">
                            <li><a href="#">Story</a></li>
                            <li><a href="#">Profile</a></li>
                            <li><a href="#">Discography</a></li>
                        </ul>
                    </li>
                    <li class="bg1" style="background-position:-163px 0px;">
                        <a id="bg2" href="#">News</a>
                        <ul class="sub2" style="background-position:-163px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                    <li class="bg1" style="background-position:-299px 0px;">
                        <a id="bg3" href="#">The Band </a>
                        <ul class="sub3" style="background-position:-163px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                      </ul>
                  </li>
                  <li class="bg1" style="background-position:-449px 0px;">
                        <a id="bg4" href="#">Shows </a>
                        <ul class="sub4" style="background-position:-163px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                      </ul>
                  </li>
                    <li class="bg1" style="background-position:-599px 0px;">
                        <a id="bg5" href="#">The Music</a>
                        <ul class="sub5" style="background-position:-163px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                    <li class="last bg1" style="background-position:-754px 0px;">
                        <a id="bg6" href="#">Videos</a>
                        <ul class="sub6" style="background-position:-163px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

这是css：

/* MENU */
.menuWrapper
    font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-transform:uppercase;
    letter-spacing: normal;
    line-height: 1.45em;
    height:485px;
    width:980px;
    background-position:0 0;
    background-repeat:no-repeat;
    background-color:transparent;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-left: 10px;
    float: left;

ul.menu
    list-style:none;
    width:980px;

ul.menu > li
    float:left;
    width:163px;
    height:542px;
    background-repeat:repeat-x;
    background-color:transparent;

ul.menu > li.last
    border:none;

.bg1
    background-image: url(../images/1.jpg);

.bg2
    background-image: url(../images/2.jpg);

.bg3
    background-image: url(../images/3.jpg);

.bg4
    background-image: url(../images/4.jpg);

.bg5
    background-image: url(../images/5.jpg);

.bg6
    background-image: url(../images/6.jpg);

ul.menu > li > a
    float:left;
    width:163px;
    height:50px;
    text-align:center;
    line-height:1.5em;
    color:#FFF;
    background-color:#000;
    letter-spacing:1px;
    cursor:pointer;
    text-decoration:none;
    font-size: 2.25em;

ul.menu > li ul
    list-style:none;
    float:left;
    margin-top:0px;
    width:100%;
    height:110px;
    padding-top:20px;
    background-repeat:no-repeat;
    background-color:transparent;

ul.menu > li ul li
    display:none;

ul.menu > li ul.sub1
    background-image:url(../images/bg1sub.png);

ul.menu > li ul.sub2
    background-image:url(../images/bg2sub.png);

ul.menu > li ul.sub3
    background-image:url(../images/bg3sub.png);

ul.menu > li ul.sub4
    background-image:url(../images/bg1sub.png);

ul.menu > li ul.sub5
    background-image:url(../images/bg2sub.png);

ul.menu > li ul.sub6
    background-image:url(../images/bg3sub.png); 

ul.menu > li ul li a
    color:#fff;
    text-decoration:none;
    line-height:1.25em;
    margin-left:20px;
    font-size:1.5em;
    width: 163px;

ul.menu > li ul.sub1 li
    display:block;

ul.menu > li ul li a:hover

最后，这是我页面中的 js（让我很生气的部分）

<script type="text/javascript">
    $(function() 
    /* position of the <li> that is currently shown */
    var current = 0;

    var loaded  = 0;
    for(var i = 1; i <4; ++i)
    $('<img />').load(function()
    ++loaded;
    if(loaded == 3)
    $('#bg1,#bg2,#bg3,#bg4,#bg5,#bg6').mouseover(function(e)

    var $this = $(this);
    /* if we hover the current one, then don't do anything */
    if($this.parent().index() == current)
    return;

    /* item is bg1 or bg2 or bg3, depending where we are hovering */
    var item = e.target.id;

    /*
    this is the sub menu overlay. Let's hide the current one if we hover the first <li> or if we come from the last one, then the overlay should move left -> right, otherwise right->left
    */
    if(item == 'bg1' || current == 5)
    $('#menu .sub'+parseInt(current+1)).stop().animate(backgroundPosition:"(-489px 0)",300,function()
    $(this).find('li').hide();
    );
    else
    $('#menu .sub'+parseInt(current+1)).stop().animate(backgroundPosition:"(163px 0)",300,function()
    $(this).find('li').hide();
    );

    if(item == 'bg1' || current == 5)
    /* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
    $('#menu > li').animate(backgroundPosition:"(-1000px 0)",0).removeClass('bg1 bg2 bg3 bg4 bg5 bg6').addClass(item);
    move(1,item);
    
    else
    /* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
    $('#menu > li').animate(backgroundPosition:"(1000px 0)",0).removeClass('bg1 bg2 bg3 bg4 bg5 bg6').addClass(item);
    move(0,item);
    

    /*
    We want that if we go from the first one to the last one (without hovering the middle one), or from the last one to the first one, the middle menu's overlay should also slide, either from left to right or right to left.
    */
    if(current == 5 && item == 'bg1')
    $('#menu .sub'+parseInt(current)).stop().animate(backgroundPosition:"(-163px 0)",300);
    
    if(current == 0 && item == 'bg6')
    $('#menu .sub'+parseInt(current+5)).stop().animate(backgroundPosition:"(163px 0)",300);
    


    /* change the current element */
    current = $this.parent().index();

    /* let's make the overlay of the current one appear */

    $('#menu .sub'+parseInt(current+1)).stop().animate(backgroundPosition:"(0 0)",300,function()
    $(this).find('li').fadeIn();
    );
    );
       
    ).attr('src', 'images/'+i+'.jpg');

    /*
    dir:1 - move left->right
    dir:0 - move right->left
    */
    function move(dir,item)
    if(dir)
    $('#bg1').parent().stop().animate(backgroundPosition:"(0 0)",200);
    $('#bg2').parent().stop().animate(backgroundPosition:"(-163px 0)",300);
    $('#bg3').parent().stop().animate(backgroundPosition:"(-326px 0)",400);
    $('#bg4').parent().stop().animate(backgroundPosition:"(-489px 0)",500);
    ('#bg5').parent().stop().animate(backgroundPosition:"(-652px 0)",600);
    $('#bg6').parent().stop().animate(backgroundPosition:"(-815px 0)",700,function()
    $('#menuWrapper').removeClass('bg1 bg2 bg3 bg4 bg5 bg6').addClass(item);
    );
    
    else
    $('#bg1').parent().stop().animate(backgroundPosition:"(0 0)",700,function()
    $('#menuWrapper').removeClass('bg1 bg2 bg3 bg4 bg5 bg6').addClass(item);
    );
    $('#bg2').parent().stop().animate(backgroundPosition:"(-163px 0)",600);
    $('#bg3').parent().stop().animate(backgroundPosition:"(-326px 0)",500);
    $('#bg4').parent().stop().animate(backgroundPosition:"(-489px 0)",400);
    $('#bg5').parent().stop().animate(backgroundPosition:"(-652px 0)",300);
    $('#bg6').parent().stop().animate(backgroundPosition:"(-815px 0)",200);
    
    
    );
    </script>

【问题讨论】：

看那个演示，就背景而言，我觉得这很好。当我将鼠标悬停在每个菜单项上时，一堆图像从侧面滑入并排列成一个大的无缝图像。所以它要么在某些浏览器中工作（我在 Firefox 中测试过），要么我错过了重点。我能看到的唯一问题是顶部的菜单在 THE BAND 和 THE MUSIC 上开始重叠，因为它们被分成两行。

谢谢克里斯。我遇到的麻烦是鼠标移出后彩色框子菜单的定位没有隐藏。我认为它与页面中的定位有关 javascript... 甚至可能是 css。它几乎完全可以正常工作。如果我理解正确的话，我想你所说的重叠只是字体没有正确呈现。

这些子菜单的偏离位置主要在页面的初始加载时看起来不对。当您开始将鼠标悬停在选项卡上时，一旦您将鼠标悬停在所有选项卡上，它们似乎就会按预期工作。

是的，菜单重叠将是由于字体。我怀疑很少有人会使用“Bebas Neue”字体，因为它不是标准字体。确保使用下一种可用字体（arial）对其进行测试，以便确保它适用于没有您的字体的用户。

【参考方案1】：

我仍然有点不确定您的问题是什么。当我最初查看页面时，背景被搞砸了，但是当我开始将鼠标悬停在事物上时，它实际上使它们对齐。

它们最初看起来不正确的原因可能与UL.subN初始背景位置为-163px 0这一事实有关。但是，当您以编程方式将其更改为“mouseout”时，您将其设置为 -489px。我怀疑如果你从 -489px 开始使用它们，那么它会起作用。

我希望这对您有所帮助，但如果不是的话，可能是一些您认为不对的页面的屏幕截图。

【讨论】：

我的示例位于 statewideemergency.com/beta2。我将处理字体问题，但它似乎适用于我的 Mac 和 PC 的 Firefox。尚未在 IE、Chrome、Safari 或 Opera 中尝试过。

@godleuf：是的，我查看了您提供的示例页面。只是在一个地方，您似乎在说，当您将鼠标悬停时，它会搞砸，而当我将鼠标悬停时，它会使事情变得更好……而且，如果在计算机上安装了该字体，则无论使用哪种浏览器，它都可以正常工作。如果您发现一台没有字体的计算机，您希望能看到问题。我在回答中提到的定位是否完全解决了您的问题？

甜蜜！感谢您为我指明正确的方向。熬夜和计算数字不会混在一起......你在上面指出的错误以及其他简单的数学错误影响了我在睡了几个小时后现在意识到的定位:) 谢谢你坚持我的人！我一定搞砸了我的css并且没有正确写入@font。我会努力解决这个问题，但我对导航/滑块​​背景感到非常高兴:)