Javascript 如何使用JQuery防止图像跳出窗口

我试图用上、下、左、右箭头键在屏幕上移动一个简单的图像。它工作得很好，只是图像一直在窗外，我看不见。我想做的是将图像保持在窗口范围内，而不是超出窗口范围

这是我的密码：

let height=$（window.height（）；
让宽度=$（窗口）.width（）；
$（文档）.keydown（函数（键）{
开关（parseInt（key.which，10））{
//按左箭头键
案例37：
如果（$（'img'）.position（）.left>0）{
$（'img'）。设置动画({
左：“-=20px”
}“快”）；
}
打破
//向上箭头按下
案例38：
如果（$（'img'）.position（）.top>0）{
$（'img'）。设置动画({
顶部：'-=20px'
}“快”）；
}
打破
//右箭头按下
案例39：
if（$（'img'）.position（）.left<宽度）{
$（'img'）。设置动画({
左：'+=20px'
}“快”）；
}
打破
//按下向下箭头
案例40：
如果（$（'img'）。位置（）。顶部<高度）{
$（'img'）。设置动画({
顶部：'+=20px'
}“快”）；
}
打破
}
});
正文{
宽度：100%；
身高：100%；
背景：蓝色；
溢出：隐藏；
/*这就是解决办法*/
}
img{
位置：相对位置；
左：0；
排名：0；
}
似乎您只需要再进行一次计算。以右移动为例，如果图像的当前右位置距离屏幕边缘5px，会发生什么情况？然后，
（$（'img'）.position（）.right>width）
将计算为true，并移动20px，使其离开屏幕15px

所以，你只需要考虑一下这种可能性

if($('img').position().right > 0){
    distance = ( ($('img').position().left - width) < 20 ) ? ($('img').position().left - width) : 20;
    $('img').animate({left: "+="+distance+"px"}, 'fast');
}

if（$（'img'）.position（）.right>0）{
距离=（$（'img'）.position（）.left-width）<20）？（$（'img'）.position（）.left-width）：20；
$（'img'）.animate（{左：“+=”+距离+“px”}，'fast'）；
}

这里我们是说，如果图像的当前位置距离右边缘小于20px，只移动该差值，否则，将其移动20px

类似的逻辑需要应用于底部，以确保图像移动不超过屏幕高度

我建议对底部和左侧应用相同的逻辑。它当前没有离开屏幕的原因是，您从0,0开始，一次移动20像素。它将始终返回到0,0。但是，如果您必须将其移动到右侧12px以保持在边界内，那么当您将其向后移动时，您可能会在左侧遇到相同的问题。希望这有意义。
我希望我的代码能给你带来一些线索


$（文档）.ready（函数（）{
//警报（“此页面已加载！”）；
//下面是单击按钮时隐藏段落的代码
$（“按钮”）。单击（函数（）{
$（“p”）.hide（“slow”，function（）{
警惕（“该段现已隐藏”）；
});
});
//设width=Math.max（$（document.width（），$（window.width（））；
//设height=Math.max（$（document.height（），$（window.height（））；
设高度=$（窗口）.height（）；
让宽度=$（窗口）.width（）；
var w=document.body.clientWidth；
var h=窗内高度
||document.documentElement.clientHeight
||document.body.clientHeight；
//下面是允许角色移动的代码-为什么不尝试自己制作呢
//版本？
$（文档）.keydown（函数（键）{
//document.write（Math.max（$（document.height（），$（window.height（））；
//document.write（Math.max（$（document.width（），$（window.width（））；
开关（parseInt（key.which，10））{
//按左箭头键
案例37：
如果（$（'img'）.position（）.left>1）{
$（'img'）.animate（{左：“-=70px”}，'fast'）；}
打破
//向上箭头按下
案例38：
如果（$（'img'）.position（）.top>1）{
$（'img'）.animate（{top:'-=20px'}，'fast'）；}
打破
//右箭头按下
案例39：
if（$（'img'）.position（）.left
我假设根据你当前的代码，图像离屏不会超过20px，对吗？@Chris当我向右和向下移动时，图像会离屏。但是当移动到向左和向上移动时，图像不会熄灭。我明白你的意思，但是
position（）.right
由于某些原因返回未定义的内容。我试图查找它，但它似乎不存在？已更新。这是一个输入错误。应该是
position（）。left