JS实现图片跟随鼠标移动

在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下。

在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象。它的方法属性我不多说了,想详细了解的童鞋点击这里。

我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只能get,不能set),说到这里可能很多童鞋已经知道怎么做了,没错,就是这样!把得到的坐标赋值给图片定位属性中的Left与Top即可,很简单吧!下面提供一个实现的小Demo.

材料:两张你喜欢的图片,在这里就命名为"MUp.png"与"MDown.png",为什么会有两张图片呢,这里还实现了一个鼠标按下变化图片的效果。

HTML Code is Here:

1 <div id="Main">
2     <img src="MUp.png" id="Img"/>
3 div>

CSS Code is Here:

1 *{ margin:0px; padding:0px;}
2 #Img{ position:absolute; top:0px; left:0px;}
3 #Main{ background-color:#F60; width:1177px; height:570px;}

JS Code is Here:

复制代码
 1 window.οnlοad=Main;
 2 //全局坐标变量
 3  var x="";
 4  var y="";
 5  //定位图片位置
 6  function GetMouse(oEvent)
 7  {
 8    x=oEvent.clientX;
 9    y=oEvent.clientY;
10    document.getElementById("Img").style.left=(parseInt(x)-100)+"px";
11    document.getElementById("Img").style.top=y+"px";
12   }
13  //入口
14  function Main()
15  {
16    var ele=document.getElementById("Main");
17    //注册鼠标移动事件
18    ele.οnmοusemοve=function(){GetMouse(event);}
19    // 注册鼠标按下事件
20    ele.οnmοusedοwn=function(){ChangeBg("Img","MUp.png");}
21    //注册鼠标弹回事件
22    ele.οnmοuseup=function(){ChangeBg("Img","MDown.png");}
23   }
24  //图片变化
25  function ChangeBg(id,url)
26  {
27    document.getElementById(id).src=url;
28  }
复制代码

Effects:

JS实现图片跟随鼠标移动_第1张图片

很简单吧,去试试吧。

你可能感兴趣的