<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
就完成了简单的图片跟着键盘动了,逻辑思维算法都在里面随意更改