在很多网站上能看到图片跟随鼠标移动的js特效，其实做法很简单，在这里与大家分享下。
在实现这个特效之前，需要了解js中一个对象，event(事件对象)，对，只需了解这一个对象。它的方法属性我不多说了，想详细了解的童鞋点击这里，http://www.jb51.net/article/17266.htm。
我们用到的只有这个对象的两个属性，clientx与clienty，就是触发当前事件(可能是click,也肯能是onmousemove等等事件)时鼠标在窗口区域的x,y坐标(它们都是只读属性，所以只能get,不能set)，说到这里可能很多童鞋已经知道怎么做了，没错，就是这样!把得到的坐标赋值给图片定位属性中的left与top即可，很简单吧！下面提供一个实现的小demo.
材料：两张你喜欢的图片，在这里就命名为mup.png与mdown.png，为什么会有两张图片呢，这里还实现了一个鼠标按下变化图片的效果。
html code is here:
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; }