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事件。

将这两行添加到您的 jsfiddle 并再次尝试：

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