jQuery: 与鼠标事件的偏移位置
jQuery: Offset position with mouse event
我目前正在将 block breaker 编码为 jQuery 练习,我的球拍有问题,当我离开左侧的运动场时它会改变位置。
我是所有鼠标事件的新手,我尝试了很多在 Whosebug 或互联网上找到的解决方案和想法,甚至更改了我的整个代码,但我发现唯一的方法是正确的位置就是用 mouseleave 事件做一个条件来修正偏移量。但我不喜欢它,因为如果鼠标在我之前没有的游戏区域上方或下方,它会导致更多的位置问题。
可能是第二部分不起作用,但我不知道如何更改它。
racket.left = Math.min(canvasWidth - racket.width, Math.max(2, e.offsetX));
查看 JSFiddle 了解我的意思:https://jsfiddle.net/Shilok/29wu6gj8/1/
我想要与右边相同的行为:当球拍触及任一侧并且鼠标离开运动场时,球拍保持原位(粘在一边!)
有什么想法吗?
你还需要一些东西
- 您使用的事件的 offsetX 取决于您将鼠标悬停在哪个元素上。您应该通过使用
pageX
来规范化它,而不是始终 return 相对于整个文档的左侧。
- 您应该将
Math.min
包裹在 Math.max
中,以防止它低于 0。
- 您需要考虑
.canvas
本身的偏移量。
- 您还应该重新计算 window
的 resize
事件的偏移量
var canvasWidth, racket, canvasOffset;
$(document).ready(init);
function init() {
$(window).resize(calculate).trigger('resize');
$(window).on('mousemove', moveRacket);
}
function calculate() {
canvasWidth = $('.canvas').width();
racket = {
width: $(".racket").width()
};
canvasOffset = $('.canvas').offset()
}
function moveRacket(e) {
var minLeft = Math.max(0, e.pageX - canvasOffset.left - racket.width / 2),
maxLeft = canvasWidth - racket.width;
racket.left = Math.max(Math.min(maxLeft, minLeft), 0);
$('.racket').css('left', racket.left + 'px');
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
}
.canvas {
position: absolute;
background: green;
width: 500px;
height: 200px;
}
.racket {
position: absolute;
width: 100px;
height: 14px;
bottom: 12px;
left: 0;
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="canvas">
<div class="racket"></div>
</div>
更新 fiddle
我目前正在将 block breaker 编码为 jQuery 练习,我的球拍有问题,当我离开左侧的运动场时它会改变位置。
我是所有鼠标事件的新手,我尝试了很多在 Whosebug 或互联网上找到的解决方案和想法,甚至更改了我的整个代码,但我发现唯一的方法是正确的位置就是用 mouseleave 事件做一个条件来修正偏移量。但我不喜欢它,因为如果鼠标在我之前没有的游戏区域上方或下方,它会导致更多的位置问题。
可能是第二部分不起作用,但我不知道如何更改它。
racket.left = Math.min(canvasWidth - racket.width, Math.max(2, e.offsetX));
查看 JSFiddle 了解我的意思:https://jsfiddle.net/Shilok/29wu6gj8/1/
我想要与右边相同的行为:当球拍触及任一侧并且鼠标离开运动场时,球拍保持原位(粘在一边!)
有什么想法吗?
你还需要一些东西
- 您使用的事件的 offsetX 取决于您将鼠标悬停在哪个元素上。您应该通过使用
pageX
来规范化它,而不是始终 return 相对于整个文档的左侧。 - 您应该将
Math.min
包裹在Math.max
中,以防止它低于 0。 - 您需要考虑
.canvas
本身的偏移量。 - 您还应该重新计算 window 的
resize
事件的偏移量
var canvasWidth, racket, canvasOffset;
$(document).ready(init);
function init() {
$(window).resize(calculate).trigger('resize');
$(window).on('mousemove', moveRacket);
}
function calculate() {
canvasWidth = $('.canvas').width();
racket = {
width: $(".racket").width()
};
canvasOffset = $('.canvas').offset()
}
function moveRacket(e) {
var minLeft = Math.max(0, e.pageX - canvasOffset.left - racket.width / 2),
maxLeft = canvasWidth - racket.width;
racket.left = Math.max(Math.min(maxLeft, minLeft), 0);
$('.racket').css('left', racket.left + 'px');
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
}
.canvas {
position: absolute;
background: green;
width: 500px;
height: 200px;
}
.racket {
position: absolute;
width: 100px;
height: 14px;
bottom: 12px;
left: 0;
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="canvas">
<div class="racket"></div>
</div>
更新 fiddle