Javascript实现让图片一直跟着鼠标移动
注意：图片可能加载不出来，还请及时更换图片
<!doctype html> <html> <head> <meta charset="utf-8"> <title>永恒之月</title> <style> body { margin: 0; padding: 0; height: 3000px; /*让滚动条出现*/ } img{ /*一定要position:fixed;因为这样不仅可以摆脱文档流限制，而且可以让有滚动条的页面也生效*/ position:fixed; width: 30px; height: 30px; left: 100px; top: 100px; display: none; } </style> </head> <body> <img src="https://images.cnblogs.com/cnblogs_com/blogs/724675/galleries/2096407/t_220118083946_fire2.png"> <!--设置图片链接--> <script> //获取图片元素 var imgBox=document.querySelector("img") //给document设置鼠标移动事件，其中e是鼠标移动时保存信息的对象 document.onmousemove=function(e){ //从e对象中获取鼠标的横纵坐标 var x=e.clientX var y=e.clientY console.log(x,y) //输出横纵坐标 //给图片设置行内样式使图片跟着鼠标移动 imgBox.style.top=y+5+'px' imgBox.style.left=x+5+'px' imgBox.style.display="block" //图片显示 } </script> </body> </html>
