html" title=javascript>javascript实现让图片一直跟着鼠标移动">Javascript实现让图片一直跟着鼠标移动
注意：图片可能加载不出来，还请及时更换图片
html"><!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>
