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

更新時(shí)間：2015年11月26日 14:34:15 投稿：mrr

大家瀏覽網(wǎng)頁的時(shí)候，見到過圖片跟隨鼠標(biāo)移動(dòng)的js特效，效果非常好，是怎么實(shí)現(xiàn)的呢，實(shí)現(xiàn)這個(gè)功能很簡單，感興趣的朋友一起看看吧

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

在實(shí)現(xiàn)這個(gè)特效之前，需要了解JS中一個(gè)對(duì)象，event(事件對(duì)象)，對(duì)，只需了解這一個(gè)對(duì)象。它的方法屬性我不多說了，想詳細(xì)了解的童鞋點(diǎn)擊這里，http://www.dhdzp.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即可，很簡單吧！下面提供一個(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;
 }

您可能感興趣的文章:

相關(guān)文章

JS+CSS3模擬溢出滾動(dòng)效果
這篇文章主要介紹了JS+CSS3模擬溢出滾動(dòng)效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
ES6的一些實(shí)用高級(jí)技巧總結(jié)
ES6不僅在語法上有很大的改進(jìn),在代碼的組織結(jié)構(gòu)上也有重大升級(jí),下面這篇文章主要給大家介紹了關(guān)于ES6的一些實(shí)用高級(jí)技巧的相關(guān)資料,需要的朋友可以參考下
2023-12-12
JavaScript實(shí)現(xiàn)div的鼠標(biāo)拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)div的鼠標(biāo)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
通過js獲取div的background-image屬性
div的background-image這個(gè)屬性，只是設(shè)置它的url，下面為大家介紹下如何獲取它的background-image屬性，感興趣的朋友可以參考下
2013-10-10
javascript 讀取xml,寫入xml 實(shí)現(xiàn)代碼
javascript xml讀取,寫入xml 實(shí)現(xiàn)代碼
2009-07-07
在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測試結(jié)果的前端測試工具的思路
對(duì)前端工程師來說,跨瀏覽器的兼容性問題一直是最頭疼的,測試一個(gè)小小的東西,就要打開N個(gè)瀏覽器,然后比較來比較去,記錄個(gè)瀏覽器的數(shù)據(jù),比較不同,實(shí)在是麻煩.
2010-03-03
Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解
這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
javascript for-in有序遍歷json數(shù)據(jù)并探討各個(gè)瀏覽器差異
這篇文章主要介紹了javascript for-in有序遍歷json數(shù)據(jù)并探討各個(gè)瀏覽器差異的相關(guān)資料,需要的朋友可以參考下
2015-11-11
JavaScript代碼判斷點(diǎn)擊第幾個(gè)按鈕
javascript點(diǎn)擊按鈕需求，在項(xiàng)目開發(fā)過程中經(jīng)常遇到，本文通過一段代碼給大家分享javascript代碼判斷點(diǎn)擊第幾個(gè)按鈕，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
JavaScript中提前聲明變量或函數(shù)例子
這篇文章主要介紹了JavaScript中提前聲明變量或函數(shù)的例子,本文介紹的可以說是一種小技巧或者說一種特性,需要的朋友可以參考下
2014-11-11