Javascript 如何设置角色移动的（x，y）坐标限制 在此处插入标题 动画演示 div{ 位置：绝对位置； 利润率：30像素； } &拉阔； &拉阔； 向上的 向下 $（“#右”）。单击（函数（） { $（“.block”）.animate（{“left”：“+=50px”}，“slow”）； }); $（“#向上”）。单击（函数（）{ $（“.block”）.animate（{“bottom”：“+=50px”}，“slow”）； }); $（“#向下”）。单击（函数（）{ $（“.block”）.animate（{“bottom”：“-=50px”}，“slow”）； }); $（“#左”）。单击（函数（）{ $（“.block”）.animate（{“left”：“-=50px”}，“slow”）； });
-------------------------------->>>>>>>>>>>>>>>>> 您没有初始化“left”和“bottom”css属性。所以，在第一次点击时，需要计算这些值，这就是“闪烁”的原因 我的建议是你放弃“底部”的概念而使用“顶部”。更符合逻辑。然后初始化“top”和“left”css属性，以避免“闪烁” 以下是一个工作示例：Javascript 如何设置角色移动的（x，y）坐标限制 在此处插入标题 动画演示 div{ 位置：绝对位置； 利润率：30像素； } &拉阔； &拉阔； 向上的 向下 $（“#右”）。单击（函数（） { $（“.block”）.animate（{“left”：“+=50px”}，“slow”）； }); $（“#向上”）。单击（函数（）{ $（“.block”）.animate（{“bottom”：“+=50px”}，“slow”）； }); $（“#向下”）。单击（函数（）{ $（“.block”）.animate（{“bottom”：“-=50px”}，“slow”）； }); $（“#左”）。单击（函数（）{ $（“.block”）.animate（{“left”：“-=50px”}，“slow”）； });,javascript,jquery,html,Javascript,Jquery,Html,-------------------------------->>>>>>>>>>>>>>>>> 您没有初始化“left”和“bottom”css属性。所以，在第一次点击时，需要计算这些值，这就是“闪烁”的原因 我的建议是你放弃“底部”的概念而使用“顶部”。更符合逻辑。然后初始化“top”和“left”css属性，以避免“闪烁” 以下是一个工作示例： 在此处插入标题 动画演示 div{ 位置：绝对位置； 左：30px； 顶部：80px； } « » 向上的 向下 风险限额={ 左:300,，
在此处插入标题
动画演示
div{
位置：绝对位置；
左：30px；
顶部：80px；
}
«
»
向上的
向下
风险限额={
左:300,，
top:300
},
增量=50，
移动={
左：错，
顶部：错误
}
功能释放移动（道具）{
移动[道具]=假；
}
功能doMove（向上，道具）{
变量b=$（“.block”）；
var pv=parseInt（b.css（prop））；
如果（上行和下行+增量>限制[prop]）{
警报（pv+增量+“太多”）；
返回；
}
如果（！up&&pv incrementhey Andrija，我们又面临一个问题…从开始点开始，角色直接向下移动..它不应该向上移动..首先它应该沿着水平轨道，然后它应该向下。嘿，ajay，似乎我错过了你想法中的一点。如果你按“向下”它应该下降，对吗？是的，但我的愿望是它必须在X方向（775,0）下降775px，在775px，它必须在Y方向（775350）下降，但它也从起点下降，例如img………..>（775,0）…像这样…你能帮我吗？？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
position: absolute;
margin: 30px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body background="./images/RectTrack1.jpg">
<button id="left">«</button>
<button id="right">»</button>
<button id="up">up</button>
<button id="down">down</button>
<!-- <div class="block"></div> -->
<div class="block" >
<img src="./images/vijaya.png" />
</div>
<script>
$( "#right" ).click(function()
{
$( ".block" ).animate({ "left": "+=50px"},"slow" );
});
$( "#up" ).click(function() {
$( ".block" ).animate({ "bottom": "+=50px"},"slow" );
});
$( "#down" ).click(function() {
$( ".block" ).animate({ "bottom": "-=50px" }, "slow" );
});
$( "#left" ).click(function(){
$( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
</script>
</body>
</html>