js圖片跟隨鼠標(biāo)移動(dòng)代碼
在很多網(wǎng)站上能看到圖片跟隨鼠標(biāo)移動(dòng)的JS特效,其實(shí)做法很簡(jiǎn)單,在這里與大家分享下。
在實(shí)現(xiàn)這個(gè)特效之前,需要了解JS中一個(gè)對(duì)象,event(事件對(duì)象),對(duì),只需了解這一個(gè)對(duì)象。它的方法屬性我不多說(shuō)了,想詳細(xì)了解的童鞋點(diǎn)擊這里,http://www.dbjr.com.cn/article/17266.htm。
我們用到的只有這個(gè)對(duì)象的兩個(gè)屬性,clientX與clientY,就是觸發(fā)當(dāng)前事件(可能是Click,也肯能是onmousemove等等事件)時(shí)鼠標(biāo)在窗口區(qū)域的X,Y坐標(biāo)(它們都是只讀屬性,所以只能get,不能set),說(shuō)到這里可能很多童鞋已經(jīng)知道怎么做了,沒(méi)錯(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; }
- javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果的方法
- js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法
- javascript DIV實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)
- 使用JS實(shí)現(xiàn)氣泡跟隨鼠標(biāo)移動(dòng)的動(dòng)畫效果
- 基于JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮彈出跟隨鼠標(biāo)移動(dòng)的帶箭頭的信息層
- js實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果
- javascript跟隨鼠標(biāo)x,y坐標(biāo)移動(dòng)的字效果
- js實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的小球
- js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效
- javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片
相關(guān)文章
EditPlus中的正則表達(dá)式 實(shí)戰(zhàn)(2)
這篇文章主要介紹了EditPlus中的正則表達(dá)式 實(shí)戰(zhàn)(2)的相關(guān)資料,需要的朋友可以參考下2016-12-12javascript原生封裝一個(gè)淡入淡出效果的函數(shù)測(cè)試實(shí)例代碼
這篇文章主要介紹了javascript原生封裝一個(gè)淡入淡出效果的函數(shù),主要有FadeIn淡入函數(shù)和FadeOut淡出函數(shù),需要的朋友可以參考下2018-03-03layui的layer.confirm如何獲取按鈕焦點(diǎn)
因?yàn)閍yer.confirm的按鈕并非采用button,而是a標(biāo)簽,所以獲取按鈕焦點(diǎn)獲取不到,要采用別的方法,下面介紹在ie11中和ie8中不同的寫法,對(duì)layui layer.confirm獲取按鈕焦點(diǎn)相關(guān)知識(shí)感興趣的朋友一起看看吧2023-11-11document.all還是document.getElementsByName?
document.all還是document.getElementsByName?...2006-07-07JavaScript實(shí)現(xiàn)彈出子窗口并傳值給父窗口
這篇文章主要介紹了JavaScript實(shí)現(xiàn)彈出子窗口并傳值給父窗口,方法很簡(jiǎn)單,這里推薦給大家,需要的朋友可以參考下2014-12-12javascript校驗(yàn)價(jià)格合法性實(shí)例(必須輸入2位小數(shù))
這篇文章主要介紹了javascript校驗(yàn)價(jià)格合法性實(shí)例,其中價(jià)格必須是數(shù)字且必須輸入2位小數(shù),需要的朋友可以參考下2014-05-05