0

我希望这样的东西会很受欢迎，但我很难找到合适的脚本。

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

<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}
    )
});

请帮忙！

附言。我正在使用这个插件平滑地移动背景图像。

4

2 回答 2

2

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

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

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

来源

于 2010-04-19T20:56:07.350 回答
0

您不需要 js 在活动链接上实现这一点-> 使用 css 设置链接的样式，如下所示：

a:active{backgroundPosition: 5px -50px};
于 2010-04-16T20:23:28.660 回答