通过 Jquery 动态更改 css 背景位置左侧和顶部
我是一名新程序员,英语不是我的母语,所以请提前原谅我的编程和英语错误。
这是我想要做的:我有一个 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>
背景的位置现在没有正确设置,但目前并不重要。我只是希望有一种方法可以动态改变最高位置,我稍后会担心数学。我也希望它足够清楚。亲切的问候,
艾琳
I'm a new programmer and English is not my mother language, so please forgive me in advance for both programming and English mistakes.
Here is what I want to do: I have a div tag that contains an image and a table (outside this div tag). Via jquery i'm trying to archieve a 'cropping effect' so I make my table draggable and while dragging I copy the image and set it as background on my table. Now I would need to be able to set dynamically the background position of the image in the table so when dragging the picture appears to be still. The cropping effect is archived by changing (lowering) opacity on the original image.
Note that I don't need to create a sellection or anything similar. The table is created first with a given size. After this is done, the table is dragged over the image creating the cropping effect.
Here is my problem: when I set the position for the background image via jquery(.css), it doesn't change the top position and the left position doesn't work as expected.
Let's see the javascript code:
<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>
The position of the background is not properly set now but it doesn't matter too much at the moment. I Just hope there is a way to change dynamically the top position too and I'll worry about the math later. Also I hope it's clear enough. Kind regards,
Irene
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
background-position CSS 属性可以采用两个参数,以空格字符分隔:
The background-position CSS property can take two arguments, separated by a space character:
尝试指定一个度量单位
try to specify a measure unit
我知道这篇文章很老了,但我通过观看互联网上有关 jquery 的各种教程发现了一种方法。
I know this post is very old, but I discovered a way to do this by watching various tutorials about jquery on the internet.