Javascript 如何将jQuery动画对象放置在HTML画布或Div标记中？

如何将jQuery动画对象放置在HTML画布或Div标记中？ 我有一个图像，可以通过点击按钮左右上下移动。 以下是我迄今为止所做的工作：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $('#moveleft').click(function() {
        $('#textbox').animate({
        'marginLeft' : "-=80px" //moves left
        });
    });
    $('#moveright').click(function() {
        $('#textbox').animate({
        'marginLeft' : "+=80px" //moves right
        });
    });
    $('#movedown').click(function() {
        $('#textbox').animate({
        'marginTop' : "+=80px" //moves down
        });
    });
    $('#moveup').click(function() {
         $('#textbox').animate({
         'marginTop' : "-=80px" //moves up
        });
    });
});
 </script>
<div style="border:1px solid #c3c3c3;>

<div style="padding:20px;"> 
<button id="moveleft">Move Left</button>    
<button id="moveright">Move right</button> 
<button id="movedown">Move Down</button> 
<button id="moveup">Move Up</button></div>
<div id="textbox" style="position:absolute;padding:10px;width:300px;"> 
<img  src="sample.gif">
</div>

<div>

$（文档）.ready（函数（）{
$（'#moveleft'）。单击（函数（）{
$（“#文本框”）。设置动画({
'marginLeft'：“-=80px”//向左移动
});
});
$（'#moveright'）。单击（函数（）{
$（“#文本框”）。设置动画({
“marginLeft”：“+=80px”//向右移动
});
});
$（“#向下移动”）。单击（函数（）{
$（“#文本框”）。设置动画({
“marginTop”：“+=80px”//下移
});
});
$（'#moveup'）。单击（函数（）{
$（“#文本框”）。设置动画({
'marginTop'：“-=80px”//向上移动
});
});
});
您需要计算偏移量，并将图像限制在父div中

下面是一个示例，其中图像仅限于
左
边框，扩展所有边框的类似逻辑：


$（文档）.ready（函数（）{
var parent=$（“#parent”）；
var maxLimits={
“left”：父.offset（）.left，
“右”：父.offset（）.left+300，
“top”：父.offset（）.top，
“底部”：父.offset（）.top+100
}
$（'#moveleft'）。单击（函数（）{
如果（maxLimits.left>$（'img'）.offset（）.left-80）{
$（'img'）。设置动画({
“marginLeft”：“=”+maxLimits.left+“px”
});
}否则{
$（'img'）。设置动画({
'marginLeft'：“-=80px”//向左移动
});
}
});
$（'#moveright'）。单击（函数（）{
$（'img'）。设置动画({
“marginLeft”：“+=80px”//向右移动
});
});
$（“#向下移动”）。单击（函数（）{
$（'img'）。设置动画({
“marginTop”：“+=80px”//下移
});
});
$（'#moveup'）。单击（函数（）{
$（'img'）。设置动画({
'marginTop'：“-=80px”//向上移动
});
});
});

@OP：您的问题不清楚，
img
标记已经在
div
中。你需要在画布上画这个图像吗？你好A.J，我知道图像标签已经在那里了。我正试图找到一种方法，将动画图像限制在一定的宽度和高度内。明白了，你想限制图像在div-ryt内的移动吗？现在假设它接触到父div的右边框，我单击moveright不应该重新发送（根本不移动），ryt？是的。这就是我的意思。谢谢：）