Question

Dies ist, wie ich den oberen Rand eines div und Steigerung erkennen/verringern es:

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

var addm = 1; 

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

Aber ich brauche das gleiche mit Hintergrundposition zu tun.

1. erfassen die aktuelle Top-Position eines Hintergrundbildes
2. erhöhen/verringern Sie den oberen Rand eines Hintergrundbildes

Zum Beispiel:

background-position: center 5px; 

Wie erkenne ich „5px "und erhöhen/verringern?

Dank

Answer 1

Ab jQuery 1.6, css() akzeptiert relative Werte ähnlich wie .animate(). Relative Werte sind eine Zeichenfolge, die mit + = oder - = beginnt, um den aktuellen Wert zu erhöhen oder zu verringern. Link

Zum Beispiel wie folgt

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

Wenn Sie dies auf css Wert Verwendung anderer Betrieb tun wollen

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

Sie können Demo unten

$("#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"); 
 
});

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

<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>

sehen

Firefox unterstützt background-position-x und background-position-y nicht. Wenn Sie Ihre Ziel Arbeit in Firefox tun möchten, finden jsfiddle

Sie können

Answer 2

Sie können es background-position-y wie folgt aus erhalten:

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

für diese

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

Answer 3

Sie nicht jQuery benötigen ...

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

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

Die obige Verwendung von calc() stellt sicher, dass der Wert richtig inkrementiert wird, ev de wenn ein prozentualer Positionswert verwendet wird.

Answer 4

Wenn Sie jQuery verwenden, die einfachste Möglichkeit ist, Inline inkrementelle Notation zu verwenden:

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