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 - 在菜单中移动背景箭头

回答

相关问题