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