Java教程

Javascript实现让图片一直跟着鼠标移动

本文主要是介绍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="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>
这篇关于Javascript实现让图片一直跟着鼠标移动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航