6

特定の要素にカーソルを合わせたときに表示される小さな div を作成しようとしています。また、クライアントがマウスを動かすと変化するマウス座標を使用して、div の位置をオフセットしたいと考えています。

私の推測では、これを計算して div の新しい値を返すのはコストがかかり、div の動きがよろめくのを見てリソースを浪費していると思います。

この方法をより効率的にする方法を知っている人はいますか?

優れた追跡機能を備え、要素を非常にスムーズに移動するツールチップ プラグインを使用しました。

私のjs;

 $(document).ready(function(){
        $('#utilities').mouseover(function(event) { 
            var left = event.pageX - $(this).offset().left + 100;
            var top = event.pageY - $(this).offset().top + 130;
            $('#gas-electric-hover').css({top: top,left: left}).show();
            //console.log (left, top);
        });
        $('#utilities').mouseout(function() {
            $('#gas-electric-hover').hide();
        });
    });

このjsfiddleも作成しました。実際、このコードはローカルでは驚異的ですが、jsfiddle は、マウスがターゲット div に入ったり出たりするときに座標を更新しているように見えます。

どんな助けでも大歓迎です。

4

1 に答える 1

15

私はあなたが好きなマウスムーブが欲しいと思います

 $(document).ready(function(){
    $('#utilities').mousemove(function(event) { 
        var left = event.pageX - $(this).offset().left + 100;
        var top = event.pageY - $(this).offset().top + 130;
        $('#gas-electric-hover').css({top: top,left: left}).show();
        //console.log (left, top);
    });
    $('#utilities').mouseout(function() {
        $('#gas-electric-hover').hide();
    });
});

この更新されたjsFiddle を確認してください

于 2012-09-20T09:54:02.287 に答える