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");

Answer 2

backgroundPosition: -parseInt($position.left)+'px ' + -parseInt($position.top) + 'px'});

尝试指定一个度量单位

Answer 3

我知道这篇文章很老，但是我通过在互联网上观看有关jquery的各种教程找到了一种方法。

   $(window).scroll(function(){
   var scroll_Position = $(window).scrollTop();
   $('.your_target').css({ 
       'background-position-x' : - scroll_Position + 'px',
       'background-position-y' : + scroll_Position + 'px',  
   })
})

通过Jquery动态更改css backgroundPosition left和top

3 个答案: