JQuery是一個輕量級Javascript庫,被廣泛應用在Web開發中。通過jQuery的事件處理函數,我們可以獲取鼠標的坐標位置,從而實現一些有趣的交互效果。
// 綁定鼠標移動事件 $(document).mousemove(function(event){ // 獲取鼠標相對于整個頁面的位置 var pageX = event.pageX; var pageY = event.pageY; // 獲取鼠標相對于當前元素的位置 var offsetX = event.offsetX; var offsetY = event.offsetY; // 獲取鼠標相對于當前元素父元素的位置 var clientX = event.clientX; var clientY = event.clientY; // 輸出信息 console.log('pageX: ' + pageX + ', pageY: ' + pageY); console.log('offsetX: ' + offsetX + ', offsetY: ' + offsetY); console.log('clientX: ' + clientX + ', clientY: ' + clientY); });
上面的例子中,我們綁定了document的mousemove事件,當鼠標在頁面上移動時,就會觸發這個事件。事件處理函數中,我們可以調用event.pageX和event.pageY來獲取鼠標相對于整個頁面的位置。如果我們只關心當前元素的位置,可以使用event.offsetX和event.offsetY來獲取。如果我們想獲取鼠標相對于當前元素父元素的位置,可以使用event.clientX和event.clientY。
通過獲取鼠標的坐標位置,我們可以實現一些非常有趣的交互效果,例如:跟隨鼠標移動的元素,根據鼠標位置彈出提示框等等。