1
晚上好表演的背景，我累了，並已與此戰鬥了好幾個小時。我正在使用我找到的樣品，並根據我的需要改變它。它使用jquery.bgpos.js創建一個滑動背景，當鼠標經過它時，它會在另一個圖層（導航）後面改變。它在頁面中使用定位和一些內聯樣式，我無法讓事情匹配正確。jQuery中使用的數學隱藏/動畫
我的例子顯示爲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和MUSIC上重疊，因爲它們分成兩行。 – Chris 2011-01-19 09:22:48
謝謝克里斯。我遇到的麻煩是在您將鼠標移出後，彩色框子菜單的定位不會隱藏。它與頁面中的定位有關係，我認爲......甚至可能是CSS。它幾乎完全正常工作，因爲它應該。你說的重疊，我想只是字體不能正確渲染，如果我理解你是對的。 – 2011-01-19 09:30:28