當鼠標朝向文檔的頂部或文檔的頂部中心時運行jQuery

當鼠標垂直位於文檔的頂部並且文檔的中心水平時，是否可以執行某個函數？當鼠標朝向文檔的頂部或文檔的頂部中心時運行jQuery

隨着鼠標靠近頂部中心，執行js代碼/函數怎麼樣？

這是我怎麼會想到這樣做（在jQuery和香草JS），但如果有更好的辦法，請分享：

$(document).mousemove(
    function(e){ 
     if((e.pageY=0) && (e.pageX=)){ 
      //run function 
     } 
    } 
}

我離開的原因是什麼e.pageX應等於在條件是我不知道如何做50％或中間。

此外，我相信，只有當鼠標正好在頂部和中間時，纔會運行該功能。

有誰知道隨着鼠標靠近頂部中心逐漸執行它嗎？

來源

2013-03-09 IMUXIxD

使用'mousemove'事件？但請記住，這是一項非常密集的任務，儘管它是速率有限的 – Alexander 2013-03-09 17:59:41

你有沒有嘗試過任何東西？請發佈您的代碼 – darshanags 2013-03-09 18:00:56

@darshanags我編輯了這個問題，並補充了我會怎麼想的。 – IMUXIxD 2013-03-09 18:11:45

你可以嘗試t他下面的代碼。請記住，如果您不希望瀏覽器窗口調整大小，則可以將$(window).width()/2分配給mousemove綁定之外的變量，以避免在每次更新時查找窗口寬度。需要使用Math.floor或Math.ceil來向上/向下舍入計算的水平中心以避免十進制數。

實施例1（水平中心是動態它總是會在鼠標移動重新計算。）：

$(document).on('mousemove',function(e){ 
    if((e.pageY==0) && (e.pageX==Math.floor($(window).width()/2))){ 
     //run function 
    } 
});

實施例2（水平中心保持靜止，在執行時即計算值）：

var hCenter = Math.floor($(window).width()/2); 
$(document).on('mousemove',function(e){ 
    if((e.pageY==0) && (e.pageX==hCenter)){ 
     //run function 
    } 
});

實施例3（對窗口調整大小更新hCenter）：

// calculate horizontal center at page load 
var hCenter = Math.floor($(window).width()/2); 

// update hCenter every time the window is resized 
$(window).resize(function(){ 
    hCenter = Math.floor($(window).width()/2); 
}); 

$(document).on('mousemove',function(e){ 
    if((e.pageY==0) && (e.pageX==hCenter)){ 
     //run function 
    } 
});

來源

2013-03-09 18:19:58 darshanags

如果我想在每次窗口大小調整時更新hCenter的值，該怎麼辦？因爲我確實希望它調整大小......這可能嗎？用另一個例子更新了 – IMUXIxD 2013-03-09 18:40:44

答案。 @IMUXIxD – darshanags 2013-03-09 18:56:43

感謝您更新答案 – IMUXIxD 2013-03-09 19:01:30

這是我剛纔想到的超級簡單解決方案。把一個空div在HTML，它正確地定位，使其與opacity: 0無形的，聽mouseover事件：

<div class="detector"></div>

CSS：

.detector { 
    position: absolute; // or fixed, depending on needed behaviour 
    top: 10px; 
    left: 50%; 
    height: 20px; 
    width: 20px; 
    margin-left: -10px; 
    opacity: 0; 
}

JS：

$('.detector').mouseover(function() { 
    alert('Mousemove detected!'); 
});

http://jsfiddle.net/MhPp8/

來源

2013-03-09 18:10:50 dfsq

嗯，這是一個有趣的解決方案。確實會導致更多的加價，但是謝謝。任何有關如何警告或運行任何js代碼的想法，因爲鼠標接近.detector而不是完全在.detector上。那麼，不是，包括。 – IMUXIxD 2013-03-09 18:15:10

在這種情況下，你將不得不聽'$（document）.mousemove'，這使得一切都變得更加複雜。 – dfsq 2013-03-09 18:17:59

@IMUXIxD你不需要擔心接近.detector，因爲你控制它的大小。使其變大或變小，因爲您要更改檢測到命中的區域。如果您想要兩個不同的事件，請創建兩個檢測區域：'.detector .outside {} .detector .inside {}'。 – 2013-03-09 19:01:17

當鼠標朝向文檔的頂部或文檔的頂部中心時運行jQuery

回答

相關問題