2

構築中のフォトギャラリーがあり、ホバーなどに応じて不透明度を表示、非表示、変更する前と次のボタンがあります。現在、画像自体の周りにラッパーがあり、50％の幅で2つのdivがあり、左が前、右が次のdivです。代わりに、単一のdivラッパーの左または右の50％にカーソルを合わせたときに検出することで、これを実行したいと思います。ラッパーにはさまざまな幅があり、画面サイズに合わせて100％の幅を使用します。

置き換えたい：

$(".photo-previous, .photo-next").hover(function()
{
$(this).fadeTo(100, 1);
},
function()
{
$(this).fadeTo(100, 0.5);
}
);

.photo-previousおよびの代わりにマウスの位置を使用します.photo-next。

4

3 に答える 3

13

mousemoveイベントをご利用ください。

$("#photoContainer").on('mousemove', function(e) {
    var mouseSide;
    if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
        mouseSide = 'L';
    } else {
        mouseSide = 'R';
    }
});

デモ:フィドル

編集:- this.offsetLeftフィドルを追加および更新しました。

于 2012-04-07T06:11:23.753 に答える
3

他の実装が気に入ったと既に述べましたが、本当に別の方法で実行したい場合は、マウスイベントのe.pageXとe.pageYメンバーを使用できます。だからあなたは次のようなことをすることができます...

$("#wrapper").mouseover(function(e){
    var x = e.pageX - $(this).offsetLeft;

    if(x < $(this).width() / 2)
        //left
    else
        //right
});

そしてそれはそれを動的にするので、ラッパーの幅が何であるかは実際には重要ではありません。

jquery UIのマウスプラグインには、相対的なマウス位置を取得するためのメソッドが組み込まれていると確信しています。

于 2012-04-07T05:57:05.280 に答える
-1

このようなことを簡単にするマウスオーバー（関数）があります。

于 2012-04-07T05:59:07.800 に答える