图片跟着鼠标移动

最新推荐文章于 2023-03-14 21:52:55 发布

原创最新推荐文章于 2023-03-14 21:52:55 发布 · 751 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

图片跟着鼠标移动

例题：无论鼠标移动到哪儿，图片始终跟着鼠标

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	img{width: 50px;height: 50px;position: absolute;border-radius: 50%;}
</style>
</head>
<body>
	<script type="text/javascript">
		var oImg=createImg();   //创建img
		document.function(e){
			//console.log('move');//可以知道鼠标移动的x,y位置
			e=e||window.event;
			//console.log(e);
			//获取鼠标位置
			var x=e.clientX;
			var y=e.clientY;
			//console.log(x,y);
			oImg.style.left=x+'px';//要添加单位			
			//oImg.style.log=x+10+'px';//鼠标和图片的位置的距离
			oImg.style.top=y+'px';
			document.body.appendChild(oImg);//让图片在页面中显示
		}


		function createImg(){
			var img=document.createElement('img');
			img.src='./images/2.jpg';
			return img;
		}
	</script>
</body>
</html>