js圖片跟隨鼠標移動代碼
更新時間：2015年11月26日 14:34:15 投稿：mrr
大家瀏覽網(wǎng)頁的時候，見到過圖片跟隨鼠標移動的js特效，效果非常好，是怎么實現(xiàn)的呢，實現(xiàn)這個功能很簡單，感興趣的朋友一起看看吧
在很多網(wǎng)站上能看到圖片跟隨鼠標移動的JS特效，其實做法很簡單，在這里與大家分享下。
在實現(xiàn)這個特效之前，需要了解JS中一個對象，event(事件對象)，對，只需了解這一個對象。它的方法屬性我不多說了，想詳細了解的童鞋點擊這里，http://www.fzitv.net/article/17266.htm。
我們用到的只有這個對象的兩個屬性，clientX與clientY，就是觸發(fā)當前事件(可能是Click,也肯能是onmousemove等等事件)時鼠標在窗口區(qū)域的X,Y坐標(它們都是只讀屬性，所以只能get,不能set)，說到這里可能很多童鞋已經(jīng)知道怎么做了，沒錯，就是這樣!把得到的坐標賦值給圖片定位屬性中的Left與Top即可，很簡單吧！下面提供一個實現(xiàn)的小Demo.
材料：兩張你喜歡的圖片，在這里就命名為"MUp.png"與"MDown.png"，為什么會有兩張圖片呢，這里還實現(xiàn)了一個鼠標按下變化圖片的效果。
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;
//全局坐標變量
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");
//注冊鼠標移動事件
ele.onmousemove=function(){GetMouse(event);}
// 注冊鼠標按下事件
ele.onmousedown=function(){ChangeBg("Img","MUp.png");}
//注冊鼠標彈回事件
ele.onmouseup=function(){ChangeBg("Img","MDown.png");}
}
//圖片變化
function ChangeBg(id,url)
{
document.getElementById(id).src=url;
}
相關(guān)文章
這篇文章主要介紹了JS+CSS3模擬溢出滾動效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
ES6不僅在語法上有很大的改進,在代碼的組織結(jié)構(gòu)上也有重大升級,下面這篇文章主要給大家介紹了關(guān)于ES6的一些實用高級技巧的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)div的鼠標拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
div的background-image這個屬性，只是設(shè)置它的url，下面為大家介紹下如何獲取它的background-image屬性，感興趣的朋友可以參考下2013-10-10
javascript 讀取xml,寫入xml 實現(xiàn)代碼
javascript xml讀取,寫入xml 實現(xiàn)代碼2009-07-07
在一個瀏覽器里呈現(xiàn)所有瀏覽器測試結(jié)果的前端測試工具的思路
對前端工程師來說,跨瀏覽器的兼容性問題一直是最頭疼的,測試一個小小的東西,就要打開N個瀏覽器,然后比較來比較去,記錄個瀏覽器的數(shù)據(jù),比較不同,實在是麻煩.2010-03-03
Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解
這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
javascript for-in有序遍歷json數(shù)據(jù)并探討各個瀏覽器差異
這篇文章主要介紹了javascript for-in有序遍歷json數(shù)據(jù)并探討各個瀏覽器差異的相關(guān)資料,需要的朋友可以參考下2015-11-11
javascript點擊按鈕需求，在項目開發(fā)過程中經(jīng)常遇到，本文通過一段代碼給大家分享javascript代碼判斷點擊第幾個按鈕，對本文感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了JavaScript中提前聲明變量或函數(shù)的例子,本文介紹的可以說是一種小技巧或者說一種特性,需要的朋友可以參考下2014-11-11