js圖片跟隨鼠標(biāo)移動(dòng)代碼

2019-11-20 11:09:19

字體：大中小

供稿：網(wǎng)友

在很多網(wǎng)站上能看到圖片跟隨鼠標(biāo)移動(dòng)的JS特效，其實(shí)做法很簡(jiǎn)單，在這里與大家分享下。

在實(shí)現(xiàn)這個(gè)特效之前，需要了解JS中一個(gè)對(duì)象，event(事件對(duì)象)，對(duì)，只需了解這一個(gè)對(duì)象。它的方法屬性我不多說了，想詳細(xì)了解的童鞋點(diǎn)擊這里，//m.survivalescaperooms.com/article/17266.htm。

我們用到的只有這個(gè)對(duì)象的兩個(gè)屬性，clientX與clientY，就是觸發(fā)當(dāng)前事件(可能是Click,也肯能是onmousemove等等事件)時(shí)鼠標(biāo)在窗口區(qū)域的X,Y坐標(biāo)(它們都是只讀屬性，所以只能get,不能set)，說到這里可能很多童鞋已經(jīng)知道怎么做了，沒錯(cuò)，就是這樣!把得到的坐標(biāo)賦值給圖片定位屬性中的Left與Top即可，很簡(jiǎn)單吧！下面提供一個(gè)實(shí)現(xiàn)的小Demo.
材料：兩張你喜歡的圖片，在這里就命名為"MUp.png"與"MDown.png"，為什么會(huì)有兩張圖片呢，這里還實(shí)現(xiàn)了一個(gè)鼠標(biāo)按下變化圖片的效果。

HTML Code is Here:

<div id="Main">   <img src="MUp.png" id="Img"/> </div>CSS Code is Here: *{ margin:px; padding:px;} #Img{ position:absolute; top:px; left:px;} #Main{ background-color:#F; width:px; height:px;}JS Code is Here: window.onload=Main; //全局坐標(biāo)變量  var x="";  var y="";  //定位圖片位置  function GetMouse(oEvent)  {   x=oEvent.clientX;   y=oEvent.clientY;  document.getElementById("Img").style.left=(parseInt(x)-)+"px";  document.getElementById("Img").style.top=y+"px";  } //入口 function Main() {  var ele=document.getElementById("Main");  //注冊(cè)鼠標(biāo)移動(dòng)事件  ele.onmousemove=function(){GetMouse(event);}  // 注冊(cè)鼠標(biāo)按下事件  ele.onmousedown=function(){ChangeBg("Img","MUp.png");}  //注冊(cè)鼠標(biāo)彈回事件  ele.onmouseup=function(){ChangeBg("Img","MDown.png");}  } //圖片變化 function ChangeBg(id,url) {  document.getElementById(id).src=url; }