鼠标点击哪里图片就移动到哪里

最新推荐文章于 2023-02-10 10:46:25 发布

ViTa柠柠茶

最新推荐文章于 2023-02-10 10:46:25 发布

阅读量1.1k

点赞数 4

分类专栏：前端文章标签： DW JavaScript

本文链接：https://blog.csdn.net/qq_44505797/article/details/86553502

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

开发工具与关键技术：DW JavaScript
作者：Mr_肖先生
撰写时间：2019年1月19日

首先我们要给html设置一些基本样式，创建与引入一个js文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标点击哪图片就移动到哪</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<style>
	.box1{
		position: fixed;
		top: 0;
		left: 0;
	}
</style>
<body>
	<div class="box1" id="box1">
		<img src="images/IMG_5071 拷贝.jpg" alt="" id="imgs">
	</div>
	<script src="js/index.js"></script>
</body>
</html>

我们给box1一个id，然后给box1设置一个position（定位）；可以是absolute（绝对定位）；也可以是relative（相对定位），我都实验了一次，这里我使用了fixed（固定定位），给盒子设置定位是为了后面用js获取到鼠标的位置，接下来就是核心的JavaScript部分了，其实代码也不多，就短短几行

// JavaScript Document
window.onclick=function(ev){
	var box1=document.getElementById("box1");
	var ev = ev || event;//(定义一个变量来获取事件对象，解决兼容性问题)
		 console.log(ev);//控制台输出一下获取到的值
	box1.style.left=ev.clientX+"px";
	box1.style.top=ev.clientY+"px";
};

先写个window的onclick（点击事件），在事件里面写js代码，获取到box1的id后，我们定义一个变量来获取到事件对象，为解决浏览器兼容性问题，然后需要在function里面传入变量（ev）， e.clientX是获取到鼠标X轴的位置，e.clientY是获取到鼠标Y轴的位置，当鼠标点击屏幕任意位置时，box1就会根据获取到的鼠标位置，然后移动到那个位置，我的理解是这样的，如果有错，欢迎指正，下面我们来看看控制台输出获取到的值
在这里插入图片描述
这只是部分，没截完整，下面还有很多不知道什么的鼠标值

这是我点击屏幕不同的位置获取到的不同的值
这样，我们就能实现鼠标点哪里图片就会移动到哪里的效果了！！！

ViTa柠柠茶

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
鼠标点击哪里图片就移动到哪里

开发工具与关键技术：DW JavaScript作者：Mr_肖先生撰写时间：2019年1月19日首先我们要给html设置一些基本样式，创建与引入一个js文件&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;鼠标点击哪图片就移动到哪&lt;/title&gt;
复制链接

扫一扫