我有一个框架(父)和其中的一个矩形(子)，我想根据鼠标位置在 x 轴上移动这个矩形......每当我尝试移动这个矩形时，我都会看到轻弹效果......有人可以指导我如何解决这个问题吗？
let frame = document.querySelector('.frame') ;
let slider = document.querySelector('.frame .slider') ;
let mouseX = undefined ;
frame.addEventListener('mousemove',function(e){
mouseX = e.offsetX ;
slider.style.left = mouseX + 'px' ;
}) ; html,body{
height: 100%;
}
body{
padding: 0 ;
margin: 0 ;
}
.frame{
width: 75vw ;
height: 75vh;
border: 4px solid rgb(220,220,220) ;
position: relative ;
top: 50% ;
left: 50%;
transform: translate(-50%,-50%) ;
}
.frame .slider {
position: absolute ;
width: 1% ;
height: 100%;
left: 100% ;
background-color: rgb(30,30,30) ;
cursor: pointer;
}
<div class="frame">
<div class="slider"></div>
</div>最佳答案
您需要使用 mouseX = e.clientX ; 而不是 mouseX = e.offsetX ; 因为当您的鼠标移动到 slider 上时 offsetX 将重置并且轻弹将在那里再一次希望这会有所帮助:)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
height: 100%;
}
body{
padding: 0 ;
margin: 0 ;
}
.frame{
width: 75vw ;
height: 75vh;
border: 4px solid rgb(220,220,220) ;
position: relative ;
top: 50% ;
left: 50%;
transform: translate(-50%,-50%) ;
}
.frame .slider {
position: absolute ;
width: 1% ;
height: 100%;
left: 100% ;
background-color: rgb(30,30,30) ;
cursor: pointer;
}
</style>
</head>
<body>
<div class="frame">
<div class="slider"></div>
</div>
<script>
let frame = document.querySelector('.frame') ;
let slider = document.querySelector('.frame .slider') ;
let mouseX = undefined ;
frame.addEventListener('mousemove',function(e){
mouseX = e.clientX ;
slider.style.left = mouseX - frame.getBoundingClientRect().left + 'px';
}) ;
</script>
</body>
</html>关于javascript - 鼠标移动事件上不需要的轻弹效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53063695/