溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了javascript怎么實現跟隨鼠標移動的圖片，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1、給 document 綁定 mousemove 事件，獲取鼠標的坐標：e.pageX ，e.pageY
2、將圖片設置成絕對定位：position: absolute;
3、獲取圖片元素對象，將鼠標的 x , y 坐標 分別賦值給圖片的 left ， top 值，為了時鼠標在圖片中間，可以減去圖片寬高的一半，讓圖片位置向上向左，注意：不要忘記加上單位 ‘px'
e.clientX- - -獲取鼠標 x 軸坐標，相對于瀏覽器窗口可視區
e.clientY- - -獲取鼠標 Y 軸坐標，相對于瀏覽器窗口可視區
e.pageX- - -獲取鼠標 x 軸坐標，相對于文檔頁面
e.pageY- - -獲取鼠標 Y 軸坐標，相對于文檔頁面
e.screenX- - -獲取鼠標 x 軸坐標，相對于電腦屏幕
e.screenY- - -獲取鼠標 Y 軸坐標，相對于電腦屏幕
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>獲取鼠標坐標</title>
<style>
img {
/* width: 80px;
height: 90px; */
position: absolute;
}
</style>
</head>
<body>
<img src="images/斑.png" >
<script>
var img = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
var x = e.pageX;
var y = e.pageY;
img.style.top = y - 40 + 'px';
img.style.left = x - 48 + 'px';
})
</script>
</body>
</html>頁面效果：
感謝你能夠認真閱讀完這篇文章，希望小編分享的“javascript怎么實現跟隨鼠標移動的圖片”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
