javascript - 通过 Jquery 动态更改 css backgroundPosition left AND top

Question

我是一名新程序员，英语不是我的母语，所以请提前原谅我的编程和英语错误。

这是我想要做的:我有一个 div 标签，其中包含一个图像和一个表格(在这个 div 标签之外)。通过 jquery，我试图实现“裁剪效果”，因此我使我的表格可拖动，并在拖动时复制图像并将其设置为我表格上的背景。现在我需要能够动态设置表格中图像的背景位置，以便在拖动图片时看起来是静止的。通过更改(降低)原始图像的不透明度来存档裁剪效果。请注意，我不需要创建选集或类似的东西。首先创建具有给定大小的表。完成此操作后，将表格拖到图像上以创建裁剪效果。

这是我的问题:当我通过 jquery(.css) 设置背景图像的位置时，它不会更改顶部位置，并且左侧位置无法按预期工作。

让我们看看javascript代码:

<script type="text/javascript">

$(function() {
    $("#myTable").draggable({
        drag:function() {
            //$("#myTable").css("opacity", "0.6");
            var $img = $("img").clone();
            var $src = $img.attr('src');
            $("#myTable").css("background-image", 'url(' + $src + ')');
            $position = $("#myTable").position();

            $("#myTable").css({
                backgroundPosition: -parseInt($position.left) + -parseInt($position.top)});
        },
        stop:function() {
            //$("#myTable").css("opacity", "1.0");
            $("#div1").css("opacity", "0.6");
        }
    });
});

</script>

背景的位置现在没有正确设置，但目前没有太大关系。我只希望也有一种方法可以动态更改顶部位置，稍后我会担心数学问题。我也希望它足够清楚。亲切的问候，

艾琳

Answer 1

background-position CSS 属性可以接受两个参数，以空格字符分隔:

$("#myTable").css("backgroundPosition", (-parseInt($position.left)).toString()
    + "px " + (-parseInt($position.top)).toString() + "px");