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全体をマウスオーバー/マウスムーブすると、対応するメニュー画像の前で矢印が垂直に移動するようにします。

また、メニュー画像の 1 つがクリックされた場合、矢印は対応するメニュー画像の前の位置に留まる必要があります。

何かを開始しましたが、ページの上部にいるときにのみ機能するため、下に向かっていることに気付きました。私が持っているのはこれです：

$('#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。このプラグインを使って背景画像をスムーズに動かしています。

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 に答える