javascript實現(xiàn)跟隨鼠標移動的圖片
更新時間：2021年09月30日 10:41:49 作者：qq_39111074
這篇文章主要為大家詳細介紹了javascript實現(xiàn)跟隨鼠標移動的圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)圖片跟隨鼠標移動的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)思路
1、給 document 綁定 mousemove 事件，獲取鼠標的坐標：e.pageX ，e.pageY
2、將圖片設(shè)置成絕對定位：position: absolute;
3、獲取圖片元素對象，將鼠標的 x , y 坐標 分別賦值給圖片的 left ， top 值，為了時鼠標在圖片中間，可以減去圖片寬高的一半，讓圖片位置向上向左，注意：不要忘記加上單位 ‘px'
小知識：
e.clientX- - -獲取鼠標 x 軸坐標，相對于瀏覽器窗口可視區(qū)
e.clientY- - -獲取鼠標 Y 軸坐標，相對于瀏覽器窗口可視區(qū)
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" alt="">
<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>
頁面效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript基于libgif.js實現(xiàn)控制gif動畫幀
這篇文章主要為大家詳細介紹了JavaScript如何利用libgif.js插件控制gif動畫幀,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
JS事件循環(huán)機制event loop宏任務(wù)微任務(wù)原理解析
這篇文章主要介紹了JS事件循環(huán)機制event loop宏任務(wù)微任務(wù)原理解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
如何用JavaScript實現(xiàn)一個數(shù)組惰性求值庫
這篇文章主要介紹了如何用JavaScript實現(xiàn)一個數(shù)組惰性求值庫，對惰性求值感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要為大家詳細介紹了javascript實現(xiàn)登錄框拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
使用純JS代碼判斷字符串中有多少漢字的實現(xiàn)方法(超簡單實用)
這篇文章主要給大家介紹了js判斷字符串中有多少漢字的實現(xiàn)方法然后給大家分享了使用JS判斷輸入字符串長度的兩種方法，非常不錯具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
javascript漢字轉(zhuǎn)拼音的代碼...2007-02-02
下面小編就為大家?guī)硪黄狫avaScript模擬文件拖選框樣式v1.0的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JS對img標簽進行優(yōu)化使用onerror顯示默認圖像
這篇文章主要介紹了JS對img標簽進行優(yōu)化使用onerror顯示默認圖像,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JavaScript中的繼承方式詳解,本文講解了js繼承的概念、原型式繼承與類式繼承、原型鏈繼承、類式繼承、組合繼承、原型式繼承等內(nèi)容,需要的朋友可以參考下2015-02-02
這里介紹的是網(wǎng)上比較流行的刷新頁面的代碼，整理的相對比較全了，這些知識都是前后臺結(jié)合過程中，經(jīng)常用的到的。2010-04-04