JQuery的mousemove事件可以讓開(kāi)發(fā)人員輕松地為網(wǎng)頁(yè)添加鼠標(biāo)滑動(dòng)的交互效果。該事件接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)將在鼠標(biāo)移動(dòng)時(shí)調(diào)用。

$(document).on('mousemove', function(event) {
console.log('鼠標(biāo)在 X:' + event.pageX + ', Y:' + event.pageY + ' 處移動(dòng)');
});

上述代碼將在文檔中任何地方監(jiān)聽(tīng)mousemove事件，并在鼠標(biāo)移動(dòng)時(shí)將鼠標(biāo)位置打印到控制臺(tái)中。

JQuery的mousemove事件對(duì)象包含有關(guān)鼠標(biāo)位置和事件的其他詳細(xì)信息。例如，我們可以使用event.pageX和event.pageY屬性獲取鼠標(biāo)指針相對(duì)于文檔左側(cè)和頂部的坐標(biāo)。

$(document).on('mousemove', function(event) {
$('#coord').text('鼠標(biāo)在 X:' + event.pageX + ', Y:' + event.pageY + ' 處移動(dòng)');
});

上述代碼將在文檔中任何地方監(jiān)聽(tīng)mousemove事件，并將鼠標(biāo)位置實(shí)時(shí)更新到id為“coord”的元素中。

JQuery的mousemove事件還可以與其他事件一起使用，例如mousedown和mouseup，在這種情況下，開(kāi)發(fā)人員可以輕松地實(shí)現(xiàn)拖放的交互效果。

var isDragging = false;
$(document).on('mousedown', '#dragElement', function(event) {
isDragging = true;
//保存鼠標(biāo)起始位置
startX = event.pageX - $(this).offset().left;
startY = event.pageY - $(this).offset().top;
});
$(document).on('mousemove', function(event) {
if (isDragging) {
$('#dragElement').css({
'left': event.pageX - startX,
'top': event.pageY - startY
});
}
});
$(document).on('mouseup', function(event) {
isDragging = false;
});

上述代碼將在id為“dragElement”的元素上監(jiān)聽(tīng)mousedown事件，并在元素被拖動(dòng)時(shí)更新其left和top屬性。當(dāng)鼠標(biāo)釋放時(shí)，將isDragging標(biāo)志重置為false。