js图片跟随鼠标移动代码

在很多网站上都可以看到图片用鼠标移动的JS特效。其实方法很简单，在这里跟大家分享一下。

在实现这个特殊效果之前，你需要知道JS中的一个对象，event。是的，你只需要知道这个对象。它的方法属性我就不多说了。点击此处获取您想了解更多的童鞋。//www . JB 51 . net/article/17266 . htm。

我们只使用这个对象的两个属性，clientX和clientY，它们是当前事件被触发(可能是Click或onmousemove等)时鼠标在窗口区域的x和y坐标。)(都是只读属性，只能获取不能设置)。在这里，很多童鞋可能已经知道怎么做了。对，就是这样！将获得的坐标分配到图像定位属性中的左侧和顶部，非常简单。下面提供了一个小演示。实现的素材：这里有两张你喜欢的图片分别命名为‘MUP . png’和‘mdown . png’。为什么有两张图？这里，还实现了通过按鼠标改变图片的效果。

超文本标记语言代码在这里：

div id=' Main ' Img src=' http : mUP . png ' id=' Img '/div CSS Code is here : * { margin : px；padding:px} # Img { position:absolutetop:pxleft:px} # Main { background-color : # F；宽度： px；height:px}JS代码在这里Here: window.onload=Main//全局坐标变量var x=var y=//定位图片位置函数get mouse(oevent){ x=oevent . client x；y=oEvent.clientYdocument . getelementbyid(' Img '). style . left=(ParSeint(x)-)' px '；document . getelementbyid(' Img '). style . top=y ' px '；}//entry function main(){ varele=document . getelementbyid(' main ')；//注册鼠标移动事件元素。onmousemove=function(){ getmouse(事件)；}//注册鼠标按下事件ele . onmousedown=function(){ change BG(' img '，' MUP . png ')；}//注册鼠标弹跳事件ele . onmouseup=function(){ change BG(' img '，' mdown . png ')；} }//图片更改函数changebg (id，URL){ document . getelementbyid(id)。src=URL}