追加的元素在mousemove上移動不靈活？

我想在點擊一個按鈕時作出加載提示。下面是我的嘗試，追加的元素在mousemove上移動不靈活？

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尖」不隨鼠標順利移動。它看起來一直都很生澀。

但它工作正常，如果它在一個盒子裏，用鼠標平滑移動。

請看看here。

我錯過了什麼？我該如何解決它？

來源

2012-12-22 laukok

這個問題似乎只是因爲document.body是不是瀏覽器窗口的高度的100％。因此，當你低於身體的底部時，它不再發射mousemove事件。

這兩行添加到您的jsfiddle並再次嘗試：

html { height:100%; } 
body { height:100%; }

來源

2012-12-22 18:08:38

是的，你是對的。感謝您指出！ – laukok

嘗試動畫而不是設置靜態位置，以創建更平滑的過渡。

$(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-22 18:06:34 Bryan

感謝你的建議。它仍然有同樣的問題。但我認爲這是'因爲document.body不是瀏覽器窗口高度的100％。「正如Jason指出的那樣。 – laukok

追加的元素在mousemove上移動不靈活？

回答

相關問題