Использование математики в jquery, чтобы скрыть / показать фоны с анимацией - PullRequest
Новая
       27

Использование математики в jquery, чтобы скрыть / показать фоны с анимацией

1 голос
/ 19 января 2011

Добрый вечер, я устал и боролся с этим часами.Я использую образец, который я нашел, и изменяю его для своих нужд.Он использует jquery.bgpos.js для создания скользящего фона, который изменяется за другим слоем (навигация) при наведении мыши на него.Он использует позиционирование и некоторые встроенные стили на странице, и я не могу подобрать подходящие вещи.

Мой пример показан здесь .Когда вы наводите курсор на текстовые вкладки, фон меняется, но не позиционируется правильно, потому что, ну, я облажался.Я ненавижу публиковать здесь весь этот код, но у меня не хватает времени, и я только ищу кого-то с лучшим пониманием, чтобы исправить мои ошибки.Спасибо.

Вот 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>

1 Ответ

1 голос
/ 19 января 2011

Я все еще немного неуверен в том, какие у тебя проблемы.когда я вначале смотрю на страницу, фоны облажаются, но после того, как я начинаю наводить мышью на вещи, они фактически выстраиваются в линию.

Причина, по которой они изначально выглядят неправильно, вероятно, связана с тем, чтоисходная фоновая позиция UL.subn -163px 0.Однако, когда вы изменяете его программно для «mouseout», вы устанавливаете его на -489px.Я подозреваю, что если вы начнете с них со -489px, то это сработает.

Надеюсь, это будет полезно, но если нет, то, может быть, скриншот фрагмента страницы, который выглядит неправильно для вас.

...