Javascript实现让小图片一直跟着鼠标移动
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>
本文来自博客园,作者:永恒之月TEL,转载请注明原文链接:https://www.cnblogs.com/akc4/p/15819524.html