<html><head><meta charset="utf-8" /><title>实现在指定区域内图片随着鼠标的移动移动</title><link rel="stylesheet" href="indexCss.css"></head><body><div class="shubiao"><div class="div_img"><img src="图片的地址" alt="图片" /></div></div><div class="XS"><p class="WinX">鼠标的X值:<p id="winXZ">0</p></p><br /><p class="WinY">鼠标的Y值:<p id="winYZ">0</p></p></div></body><script src="indexJS.js"></script></html>
css只是布局随便搞搞就好了ustify-content: center; align-items: center;这俩个是居中,min-height: 100vh;最小高度是100vh
*{margin: 0;padding: 0;box-sizing: border-box;}.shubiao{display: flex;justify-content: center;align-items: center;min-height: 100vh;}.shubiao .div_img img{position: relative;display: flex;width: 500px;height: 350px;background-size: cover;}.XS{position: relative;left: 0;top: -80px;display: flex;}.XS .WinX,.XS .WinY{display: inline;/*取消换行*/}
首先若是要实现鼠标移动图片跟着移动第一步是要捕获到鼠标的位置:
function WinDiv(){winXZ.innerHTML = window.event.clientX;//鼠标X轴方向winYZ.innerHTML = window.event.clientY;//鼠标Y轴方向}document.onmousemove = WinDiv;//实现效果
我的图片设定是居中的，先把鼠标放到中心位置查看坐标(对之后计算有用)
我们让图片在中间为界的位置上只是移动一次:
(1)首先我们获取到图片id值才可以方便进行更改所以我们在img标签上多增加一个id="":
<img src="图片的地址" alt="图片" id="img1"/>
(2)为了添加有移动的效果我们在css里定义一个新的元素:
#img1{transition: 0.5s;}
(3)然后我们根据中间的位置写一个简单的js(javascript)判断:
function WinDiv(){winXZ.innerHTML = window.event.clientX;winYZ.innerHTML = window.event.clientY;let img1 = document.getElementById('img1');if(window.event.clientX > 767){img1.style.left = 5 + "px";}if(window.event.clientX < 767){img1.style.left = -5 + "px";}if(window.event.clientY > 393){img1.style.top = 5 + "px";}if(window.event.clientY < 393){img1.style.top = -5 + "px";}}document.onmousemove = WinDiv;//中心X:767,Y:393
就完成了简单的图片跟着键盘动了，逻辑思维算法都在里面随意更改
![[js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球](https://1200zi.500zi.com/uploadfile/img/15/615/a799575818811c1c38cfa3758caa576b.jpg)
