0

ボタンをクリックしたときの読み込みのヒントを作りたいです。以下は私の試みです、

this.mouse_loader_click = function(){   

    /* CONFIG */        
    xOffset = 10;
    yOffset = 20;       

    $(".mouse-loader").click(function(e){

        /* append the popup */
        $(document.body).append("<p class='loading-tip'>Loading</p>");
        $(".loading-tip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");

        $(document.body).mousemove(function(e){
            $(".loading-tip")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px");
        });

        return false;

    });


};

loading elementしかし、「.loading - tip」がマウスと一緒にスムーズに動かないので、おかしな動作をします。ずっとぎくしゃくしているようです。

しかし、ボックス内にある場合は問題なく動作し、マウスでスムーズに移動します。

こちらをご覧ください。

私は何を逃したのですか？どうすれば修正できますか？

4

2 に答える 2

1

静的な位置を設定する代わりにアニメーション化して、よりスムーズな遷移を作成してみてください。

$(document.body).mousemove(function(e){
    $(".loading-tip").stop().animate({
        top     : (e.pageY - xOffset) + "px",
        left    : (e.pageX + yOffset) + "px"
    }, 100); // 100 is the desired time in milliseconds from point A to point B, play with it if it's not smooth enough for you :)
});
于 2012-12-22T18:06:34.543 に答える
1

問題document.bodyは、ブラウザ ウィンドウの高さが 100% ではないことが原因のようです。mousemoveしたがって、ボディの底より下に到達すると、イベントが発生しなくなります。

次の 2 行を jsfiddle に追加して、もう一度試してください。

html { height:100%; }
body { height:100%; }
于 2012-12-22T18:08:38.647 に答える