欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2015年11月26日 14:34:15   投稿:mrr  
大家瀏覽網(wǎng)頁(yè)的時(shí)候,見(jiàn)到過(guò)圖片跟隨鼠標(biāo)移動(dòng)的js特效,效果非常好,是怎么實(shí)現(xiàn)的呢,實(shí)現(xiàn)這個(gè)功能很簡(jiǎn)單,感興趣的朋友一起看看吧

在很多網(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;
 }

相關(guān)文章

最新評(píng)論