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)文章
讓bootstrap的carousel支持滑動(dòng)滾屏的實(shí)現(xiàn)代碼
這篇文章主要介紹了讓bootstrap的carousel支持滑動(dòng)滾屏的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-11-11javascript中創(chuàng)建對(duì)象的幾種方法總結(jié)
以下幾種,是javascript中最常用的創(chuàng)建對(duì)象的方式。初學(xué)者看到后,可能會(huì)暈掉,甚至?xí)X得擔(dān)心。其實(shí)完全不用擔(dān)心,這些種方式,只需要掌握一兩種,對(duì)其他的幾種只需要理解就好了2013-11-11webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程
這篇文章主要介紹了webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06javascript設(shè)置文本框光標(biāo)的方法實(shí)例小結(jié)
這篇文章主要介紹了javascript設(shè)置文本框光標(biāo)的方法,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)文本框光標(biāo)的位置、設(shè)置及文本操作的相關(guān)技巧,需要的朋友可以參考下2016-11-11js實(shí)現(xiàn)倒計(jì)時(shí)時(shí)鐘的示例代碼
本篇文章主要是對(duì)js倒計(jì)時(shí)時(shí)鐘的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12JS遍歷Json字符串中鍵值對(duì)先轉(zhuǎn)成JSON對(duì)象再遍歷
這篇文章主要介紹了JS遍歷Json字符串中鍵值對(duì)的方法,先將Json字符串轉(zhuǎn)換成JSON對(duì)象,再進(jìn)行遍歷,需要的朋友可以參考下2014-08-08Vue3基于countUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)的插件
本文主要介紹了Vue3基于countUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)的插件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04js實(shí)現(xiàn)動(dòng)態(tài)改變字體大小代碼
本文為大家介紹下使用js如何實(shí)現(xiàn)動(dòng)態(tài)改變字體大小,感興趣的額朋友不要錯(cuò)過2014-01-01