html js 鼠标移动图片跟着移动 |
您所在的位置：网站首页 › 鼠标滑动图片跟着动 › html js 鼠标移动图片跟着移动 |
html js 鼠标移动图片跟着移动
|
实现在指定区域内图片随着鼠标的移动移动
鼠标的X值:
0
鼠标的Y值:
0
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="": (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 393){ img1.style.top = 5 + "px"; } if(window.event.clientY |
【本文地址】
今日新闻 |
推荐新闻 |