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

清疚 2022-03-25 08:07 303阅读 0赞

开发工具与关键技术：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就会根据获取到的鼠标位置，然后移动到那个位置，我的理解是这样的，如果有错，欢迎指正，下面我们来看看控制台输出获取到的值  
![在这里插入图片描述][2019011916021219.GIF]  
这只是部分，没截完整，下面还有很多不知道什么的鼠标值  
![在这里插入图片描述][2019011916101054.GIF]  
这是我点击屏幕不同的位置获取到的不同的值  
这样，我们就能实现鼠标点哪里图片就会移动到哪里的效果了！！！

[2019011916021219.GIF]: /images/20220325/c86fd94d6a584c43ae310f7d36fa56c2.png
[2019011916101054.GIF]: /images/20220325/df9e60b6c49942bcad4082fa9c014fad.png