jQuery - 在菜單中移動背景箭頭

我期望類似這樣的東西在需求中非常流行，但是我很難找到適合的腳本。jQuery - 在菜單中移動背景箭頭

我已經有了一個基本的菜單建立這樣的：

<div id="menu"> 
    <ul> 
     <li><a href="#"><img src="images/btn1.png"></a></li> 
     <li><a href="#"><img src="images/btn2.png"></a></li> 
     <li><a href="#"><img src="images/btn3.png"></a></li> 
    </ul> 
</div>

股利#menu有一個小箭頭的背景圖像。當你使用鼠標懸停/鼠標移動整個#menu div時，我想讓箭頭在相應的菜單圖像前面垂直移動。

另外，當單擊其中一個菜單圖像時，箭頭應該停留在相應菜單圖像前的位置。

我開始了一些事情，但我注意到它正在向下，因爲它只在你處於頁面頂部時才起作用。我有這個：

$('#menu').css({backgroundPosition: '5px 10px'}); //Starting position 

$('#menu').mousemove(function(e){ 
    $('#menu').stop().animate(
     {backgroundPosition: '5px ' + (e.pageY-60) + ' px'}, 
     {duration:100} 
    ) 
}).mouseout(function(){ 
    $('#menu').stop().animate(
     {backgroundPosition: '5px 10px'}, 
     {duration:100} 
    ) 
});

請幫忙！

ps。我正在使用this插件來平滑移動背景圖像。

來源

2010-04-16 Bob

一些數學後，我設法解決它。後來我發現有人誰管理，以更快的速度做：

function rPosition(elementID, mouseX, mouseY) { 
    var offset = $('#'+elementID).offset(); 
    var x = mouseX - offset.left; 
    var y = mouseY - offset.top; 

    return {'x': x, 'y': y}; 
}

Source

來源

2010-04-19 20:56:07 Bob

你不需要JS來實現這一目標的活動鏈接 - >風格與CSS像這樣的鏈接：

a:active{backgroundPosition: 5px -50px};

來源

2010-04-16 20:23:28 Felix

我怕你沒看過我的職務。我想讓它順利滑動。它的位置是基於鼠標在那一刻的位置，如果鼠標在div內。否則，它應該回到它的起始位置。 – Bob 2010-04-17 17:25:21

jQuery - 在菜單中移動背景箭頭

回答

相關問題