Question

这是我检测div的上边距并增加/减少它的方法：

var oldm = $("#bdi").css("margin-top").replace("px", "");

var addm = 1;

$("#bdi").css({
'margin-top': '-='+addm+'px'
})

但我需要对背景位置做同样的事情。

检测背景图像的实际顶部位置
增加/减少背景图片的上边距

例如：

background-position: center 5px;

如何检测“5px”并增加/减少它？

由于

Answer 1

您可以使用background-position-y来获取它：

var bgPositionY = ($("#bdi").css('background-position-y'))
var addPos = 5;
$("#bdi").css({
'background-position-y': '-='+addPos+'px'
})

https://jsfiddle.net/IA7medd/aLkok1n4/

Answer 2

你不需要jQuery ......

var el = document.getElementById('bdi'),
    currentYPosition = getComputedStyle(el)['backgroundPositionY'],
    increment = 1,
    newYPosition = 'calc(' + currentYPosition + ' + ' + increment + 'px)';

// Set new backgroundPositionY
el.style.backgroundPositionY = newYPosition;

使用上面的calc()可确保正确递增值，即使使用百分比位置值也是如此。

Answer 3

如果您正在使用jQuery，最简单的选择是使用内联增量表示法：

$("#bdi").css('background-position-y', '+=5px');

Answer 4

从jQuery 1.6开始，.css（）接受类似于.animate（）的相对值。相对值是以+ =或 - =开头的字符串，用于递增或递减当前值。 Link

例如像这样

$("div").css("background-position-x", "+=10px");
$("div").css("background-position-Y", "-=10px");

如果要对css值进行其他操作，请使用此

$("div").css("background-position-x", function(index) {
    return index * 10;
});

你可以在底部看到演示

＆＃13;

$("#increaseX").click(function(){
    $("#image").css("background-position-x", "+=10px");
});
$("#decreaseX").click(function(){
    $("#image").css("background-position-x", "-=10px");
});
$("#increaseY").click(function(){
    $("#image").css("background-position-y", "+=10px");
});
$("#decreaseY").click(function(){
    $("#image").css("background-position-y", "-=10px");
});

＆＃13;

#image {
    width: 100px;
    height: 100px;
    background-image: url("https://assets.servedby-buysellads.com/p/manage/asset/id/28536");
    background-position: 0px 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image"></div>
<button id="increaseX">increaseX</button>
<button id="decreaseX">decreaseX</button>
<br />
<button id="increaseY">increaseY</button>
<button id="decreaseY">decreaseY</button>

＆＃13;

Firefox不支持background-position-x和background-position-y。如果您想在firefox中完成目标工作，请参阅jsfiddle

你可以

使用javascript

4 个答案: