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="img/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>
