Question

我希望这样的东西在需求上非常受欢迎，但我在寻找适合的剧本方面遇到了很多麻烦。

我有一个像这样的基本菜单：

<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>

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插件来顺畅地移动背景图片。

Answer 1

经过一些数学计算，我设法解决了这个问题。后来我发现有人设法做得更快：

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

Answer 2

你不需要js才能在主动链接上实现这一点 - ＆gt;使用类似这样的css链接样式：

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

jQuery - 在菜单中移动背景箭头

2 个答案: