Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/75.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 通过Jquery动态更改css背景位置左上角_Javascript_Jquery_Background Position - Fatal编程技术网

Javascript 通过Jquery动态更改css背景位置左上角

Javascript 通过Jquery动态更改css背景位置左上角,javascript,jquery,background-position,Javascript,Jquery,Background Position,我是一个新的程序员,英语不是我的母语,所以请原谅我在编程和英语方面的错误 下面是我想要做的:我有一个div标记,它包含一个图像和一个表(在这个div标记之外)。通过jquery,我试图归档一个“裁剪效果”,这样我就可以拖动我的表格,在拖动的同时复制图像并将其设置为表格的背景。现在,我需要能够动态设置图像在表格中的背景位置,以便在拖动图片时显示为静止。通过更改(降低)原始图像上的不透明度来存档裁剪效果。 请注意,我不需要创建Selection或任何类似的内容。首先创建具有给定大小的表。完成此操作后

我是一个新的程序员,英语不是我的母语,所以请原谅我在编程和英语方面的错误

下面是我想要做的:我有一个div标记,它包含一个图像和一个表(在这个div标记之外)。通过jquery,我试图归档一个“裁剪效果”,这样我就可以拖动我的表格,在拖动的同时复制图像并将其设置为表格的背景。现在,我需要能够动态设置图像在表格中的背景位置,以便在拖动图片时显示为静止。通过更改(降低)原始图像上的不透明度来存档裁剪效果。 请注意,我不需要创建Selection或任何类似的内容。首先创建具有给定大小的表。完成此操作后,将表格拖到图像上,创建裁剪效果

这是我的问题:当我通过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>

$(函数(){
$(“#myTable”).可拖动({
拖动:函数(){
//$(“#myTable”).css(“不透明度”,“0.6”);
var$img=$(“img”).clone();
var$src=$img.attr('src');
$(“#myTable”).css(“背景图像”,“url(+$src+)”);
$position=$(“#myTable”).position();
$(“#myTable”).css({
背景位置:-parseInt($position.left)+-parseInt($position.top)});
},
停止:函数(){
//$(“#myTable”).css(“不透明度”、“1.0”);
$(“#div1”).css(“不透明度”,“0.6”);
}
});
});
背景的位置现在没有正确设置,但目前它并不重要。我只是希望有一种方法可以动态地改变排名第一的位置,稍后我会担心数学问题。我也希望它足够清晰。亲切问候,

艾琳

尝试指定度量单位

CSS属性可以包含两个参数,用空格分隔:

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

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

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

我已经试过了,没用……不过还是谢谢你,我真的很感谢你对我的问题感兴趣。将来我会说,我不认为这是一个语法错误(至少我希望不是),我已经尝试了所有可能的组合XD。目前的语法是唯一一个在背景位置上实际产生一些结果的语法,否则它什么也不做…只是设置一个背景。可能它遗漏了左和顶部位置之间的一个空格。编辑:正如弗里德里克所指出的:)
   $(window).scroll(function(){
   var scroll_Position = $(window).scrollTop();
   $('.your_target').css({ 
       'background-position-x' : - scroll_Position + 'px',
       'background-position-y' : + scroll_Position + 'px',  
   })
})