JavaScript a background-position: Jak napozicovat obrázek v pixelech vůči aktuální poloze?

Na pozadí elementu máme napozicovaný obrázek například takto:

body { url(‘/img/obrazek_pozadi.jpg’) center top no-repeat; }

Obrázek je úplně nahoře (osa y) a vycentrovaný na střed (osa x). Místo center můžeme použít 50% a místo top 0%.

Představte si situaci, že ho potřebujeme pomocí JavaScriptu posunout o 60 pixelů vlevo (na ose x). V jQuery jsem nenašel způsob, jak to nějak jednoduše udělat. Přes $(‘body’).css(‘background-position’); mohu sice zjistit jeho pozici v procentech, ale nikoli v pixelech, což znamená, že nemáme 60 pixelů od čeho odečíst.

Pozici lze ale spočítat:

(((šířka_obrázkušířka_elementu) / 2) + posun) * -1;

Konkrétní příklad může vypadat takto:

var left = (((1980 – $(‘body’).width()) / 2) + 60) * -1;
 $(‘body’).css(‘background-position’, left + ‘px 0%’);

 

 




Leave a Reply