网页中鼠标点击哪图片就跟着移动到哪的代码谁知道（JS高手来！！！）

发布网友发布时间：2022-05-18 10:49

共2个回答

懂视网时间：2022-05-18 15:11

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

在实现这个特效之前，需要了解JS中一个对象，event(事件对象)，对，只需了解这一个对象。它的方法属性我不多说了，想详细了解的童鞋点击这里，http://www.gxlcms.com/article/17266.htm。

我们用到的只有这个对象的两个属性，clientX与clientY，就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性，所以只能get,不能set)，说到这里可能很多童鞋已经知道怎么做了，没错，就是这样!把得到的坐标赋值给图片定位属性中的Left与Top即可，很简单吧！下面提供一个实现的小Demo.
材料：两张你喜欢的图片，在这里就命名为"/Uploads/MUp.png"与"MDown.png"，为什么会有两张图片呢，这里还实现了一个鼠标按下变化图片的效果。

HTML Code is Here:

热心网友时间：2022-05-18 12:19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> #di{position:absolute;} </style> </head> <body> <div id="di"><img /></div> </body> </html> <script type="text/javascript"> document.documentElement.onclick=function(){ document.getElementById("di").style.top=event.y document.getElementById("di").style.left=event.x } </script>

采纳哦