通过Jquery动态改变css backgroundPosition left AND top答案

【问题标题】：Dynamically change css backgroundPosition left AND top via Jquery通过Jquery动态改变css backgroundPosition left AND top
【发布时间】：2011-05-13 18:28:37
【问题描述】：

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

这是我想要做的：我有一个 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>

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

艾琳

【问题讨论】：

标签： javascript jquery background-position

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

尝试指定度量单位

【讨论】：

我已经尝试过了，但没有奏效……但还是谢谢你，我真的很感激你对我的问题感兴趣。对于未来我会说我不认为这是一个语法错误（至少我希望不是），我已经尝试了所有可能的组合 XD。目前的语法是唯一在背景位置上实际产生一些结果的语法，否则它什么也不做……只是设置一个背景。
可能它错过了左侧和顶部位置之间的空格。编辑：正如弗雷德里克指出的:)

【解决方案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',  
   })
})

【讨论】：